Merge commit '3a8963b49d96d0746b64244fa17458d4ae68ec45' into feature/combination-of-all-the-things

electron/main/index.html

@@ -32,6 +32,11 @@
 </div>
 
 <button class="submit-btn" id="submitButton">Submit Video</button>
+
+<div class="progressbar">
+  <div class="progress_fill"></div>
+  <span class="progress_text">0%</span>
+</div>
 </div>
   
   <script src="script.js"></script>

electron/main/script.js

@@ -29,3 +29,9 @@ function handleFiles(files) {
     }
 }
 }
+
+function updateProgressBar(bar, value){
+  value = Math.round(value);
+  bar.querySelector(".progress_fill").style.width = `${value}%`;
+  bar.querySelector(".progress_text").textContent = `${value}%`;
+}

electron/main/style.css

@@ -108,3 +108,25 @@ h1 {
   align-content: center;
 }
 
+.progressbar{
+  position: relative;
+  width: 210px;
+  height: 30px;
+  background: darkslategray;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.progress_fill{
+  width: 0%;
+  height: 100%;
+  background: green;
+  transition: all 0.2s;
+}
+
+.progress_text{
+  position: absolute;
+  top: 50%;
+  right: 5px;
+  transform: translateY(-50%);
+}