per-file progress bars

static/transbeam.css

@@ -31,6 +31,12 @@ table {
     margin: 20px auto;
 }
 
+tr {
+    background-image: linear-gradient(0deg, #7af, #7af);
+    background-repeat: no-repeat;
+    background-size: 0;
+}
+
 tr + tr td {
     border-top: 1px solid #ddd;
 }

static/transbeam.js

@@ -41,6 +41,7 @@ function finishSending() {
     }
     socket.close();
     progressContainer.textContent = "Upload complete!";
+    fileList.style.backgroundColor = "#7af";
 }
 
 function sendData() {
@@ -72,6 +73,17 @@ function updateProgress() {
     }
     progress.textContent = percentage;
     progressBarFilled.style.width = percentage;
+
+    const fileEntries = Array.from(fileList.children);
+    for (entry of fileEntries.slice(0, fileIndex)) {
+        entry.style.backgroundSize = "100%";
+    }
+    if (fileIndex < files.length) {
+        const currentFile = files[fileIndex];
+        if (currentFile.size > 0) {
+            fileEntries[fileIndex].style.backgroundSize = `${(byteIndex*100/currentFile.size)}%`;
+        }
+    }
 }
 
 function updateFiles() {