Grphical progressbar

www/application/views/jobs/uploads/upload_files.php

@@ -1,3 +1,90 @@
+<style>
+/*///////////////////////////////////////////////////
+    // Presentational Styles (Not Needed) \\ 
+///////////////////////////////////////////////////*/
+html {
+  background:#0677c0;
+}
+.contentContainer {
+  background:#efefef;
+  padding:20px;
+  max-width:350px;
+  min-width:150px;
+  margin:15vh auto;
+  border-radius:10px;
+  border:solid 5px #dbdbdb;
+}
+
+/*///////////////////////////////////////////////////
+    // Skill Bars \\ 
+///////////////////////////////////////////////////*/
+.skillBar {
+  margin-bottom:26px;
+  margin-bottom: 1.66em;
+  h4 {
+    font-size:21px;
+    font-size: 1.33em;
+    text-transform: none;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: bold;
+    margin-bottom:7px;
+    margin-bottom: .33em;
+  }
+}
+.skillBarContainer {
+  width: 100%;
+  max-width: 350px;
+  height:26px;
+  height: 1.66em;
+  background: #e6eae3;
+  background: rgb(8,102,220);
+  background: rgba(8,102,220,.2);
+  overflow: hidden;
+  border-radius:5px;
+}
+.skillBarValue {
+  height: 1.66em;
+  float: left;
+  background:#0866dc;
+  background: rgb(8,102,220);
+  background: rgba(8,102,220,.75);
+}
+
+/*///////////////////////////////////////////////////
+    // Animation \\ 
+///////////////////////////////////////////////////*/
+@-webkit-keyframes slideIn {
+  0% { width: 0; }
+  25% { width:100%; }
+  100% { width: normal; }
+}
+@-moz-keyframes slideIn {
+  0% { width: 0; }
+  25% { width:100%; }
+  100% { width: normal; }
+}
+@-ms-keyframes slideIn {
+  0% { width: 0; }
+  25% { width:100%; }
+  100% { width: normal; }
+}
+@-o-keyframes slideIn {
+  0% { width: 0; }
+  25% { width:100%; }
+  100% { width: normal; }
+}
+@keyframes slideIn {
+  0% { width: 0; }
+  25% { width:100%; }
+  100% { width: normal; }
+}
+.skillBarValue {
+  -webkit-animation: slideIn 2s;
+  -moz-animation: slideIn 2s;
+  -o-animation: slideIn 2s;
+  animation: slideIn 2s;
+}
+</style>
 <div class="card-toolbar">
 <!--begin::Toolbar-->
     <div class="d-flex justify-content-start" data-kt-filemanager-table-toolbar="base">
@@ -130,6 +217,7 @@ function fileToUploadChanged(e) {
             $('#fileToUploadList').append('<br>Size limit exceeded: <span style="color:red;"><b>' + fileList[i].name + '</b> - ' + humanFileSize(fileList[i].size) + ' (' + fileList[i].type + ')</span>');
         } else {
             $('#fileToUploadList').append('<br><b>' + fileList[i].name + '</b> - ' + humanFileSize(fileList[i].size) + ' (' + fileList[i].type + ') <span class="loading-prep" id="prog'+i+'"></span>');
+            $('#fileToUploadList').append('<div class="skillBarContainer"><div id="file-progress-bar-'+i+'" class="skillBarValue value-0"></div></div>');
         }
     }
 }
@@ -186,6 +274,8 @@ function uploadajax(ttl,cl) {
                           percent = Math.ceil(event.loaded / event.total * 100);
                       }
                       $('#prog'+cl).text(percent+'%') 
+                      $("#file-progress-bar-"+cl).width(percent + '%');
+                      $("#file-progress-bar-"+cl).html(percent+'%');
                    }, false);
                  }
                  return xhr;