diff --git a/static/index.html b/static/index.html
index 5728d64..c9b570e 100644
--- a/static/index.html
+++ b/static/index.html
@@ -21,9 +21,7 @@
diff --git a/static/transbeam.css b/static/transbeam.css
index 37d82df..90bfbfe 100644
--- a/static/transbeam.css
+++ b/static/transbeam.css
@@ -14,16 +14,13 @@ body {
margin: 10px auto;
}
-#progress_bar, #progress_bar_filled {
- height: 20px;
- border-radius: 8px;
-}
#progress_bar {
+ height: 20px;
+ border-radius: 10px;
border: 1px solid #48f;
-}
-#progress_bar_filled {
- width: 0;
- background-color: #27f;
+ background-image: linear-gradient(0deg, #27f, #27f);
+ background-repeat: no-repeat;
+ background-size: 0;
}
table {
diff --git a/static/transbeam.js b/static/transbeam.js
index e065a1c..a0dfbb8 100644
--- a/static/transbeam.js
+++ b/static/transbeam.js
@@ -15,7 +15,7 @@ const downloadLink = document.getElementById('download_link');
const progressContainer = document.getElementById('progress_container');
const progress = document.getElementById('progress');
-const progressBarFilled = document.getElementById('progress_bar_filled');
+const progressBar = document.getElementById('progress_bar');
let files = [];
@@ -71,8 +71,8 @@ function updateProgress() {
} else {
percentage = `${(bytesSent*100/totalBytes).toFixed(1)}%`;
}
- progress.textContent = percentage;
- progressBarFilled.style.width = percentage;
+ progress.textContent = `${percentage} (${displaySize(bytesSent)}/${displaySize(totalBytes)})`;
+ progressBar.style.backgroundSize = percentage;
const fileEntries = Array.from(fileList.children);
for (entry of fileEntries.slice(0, fileIndex)) {