- Added CSS progress bar

apertus-open-source-cinema · Apr 10, 2018 · 6373c90 · 6373c90
1 parent cfdc72b
commit 6373c90
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git a/app/css/default.css b/app/css/default.css
@@ -10,6 +10,7 @@
     font-weight: bold;
     font-size: 1.3em;
     font-family: sans-serif;
+    box-sizing: border-box;
 }
 
 .drop-area-hover {
@@ -36,3 +37,22 @@
     display: flex;
     padding: 1em;
 }
+
+.meter {
+    height: 0.5rem;
+    position: relative;
+    background: #555;
+    border-radius: 0.5rem;
+    margin-top: 0.3em;
+    /* padding: 0.2rem; */
+    padding: 0;
+}
+
+.meter>span {
+    display: block;
+    height: 100%;
+    border-radius: 0.5rem;
+    background-color:#FA8756;
+    position: relative;
+    overflow: hidden;
+}
diff --git a/app/index.html b/app/index.html
@@ -15,9 +15,15 @@
 
 <body>
 
-    <div id="drop-area" class="drop-area">
-        Drop images here
+    <div style="width: 25vw;box-sizing: border-box;">
+        <div id="drop-area" class="drop-area">
+            Drop images here
+        </div>
+        <div class="meter">
+            <span id="upload-progress" style="width: 0%"></span>
+        </div>
     </div>
+
     <div class="content">
         <div id="preview-area" class="output-area">
             <img id="preview-content"></img>

diff --git a/app/js/main.js b/app/js/main.js
@@ -14,6 +14,7 @@ function start () {
 
   uploader.addEventListener('progress', function (event) {
     var percent = event.bytesLoaded / event.file.size * 100
+    document.getElementById('upload-progress').style.width = percent + '%'
     console.log('File is', percent.toFixed(2), 'percent loaded')
   })
 }