From f4c45f8371ec49242b65c775067eac83bc8c0c89 Mon Sep 17 00:00:00 2001
From: "eric.minning" <Minning.Eric@gmail.com>
Date: Mon, 10 Nov 2025 15:38:59 +0100
Subject: [PATCH] Added a progressbar

---
 electron/main/index.html |  5 +++++
 electron/main/script.js  |  6 ++++++
 electron/main/style.css  | 22 ++++++++++++++++++++++
 3 files changed, 33 insertions(+)

diff --git a/electron/main/index.html b/electron/main/index.html
index f5b0fb4..d75939f 100644
--- a/electron/main/index.html
+++ b/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>
diff --git a/electron/main/script.js b/electron/main/script.js
index aa74bd8..cc1ac2b 100644
--- a/electron/main/script.js
+++ b/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}%`;
+}
\ No newline at end of file
diff --git a/electron/main/style.css b/electron/main/style.css
index 0b2a75c..b68c162 100644
--- a/electron/main/style.css
+++ b/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%);
+}
\ No newline at end of file