progress bar - also give color feedback

1 files changed, 4 insertions, 3 deletions

diff --git a/static/script.js b/static/script.js
index 4be36b8..8137b45 100644
--- a/static/script.js
+++ b/static/script.js
@@ -113,9 +113,9 @@ function FileUpload(preview, file) {
 
 	xhr.upload.addEventListener("load", (e) => {
 		this.ctrl.update(100);
-		preview.removeChild(this.ctrl);
 	});
 	xhr.addEventListener("load", (e) => {
+		preview.removeChild(this.ctrl);
 		const a = document.createElement('a');
 		const text = document.createTextNode(xhr.responseText);
 		a.href = xhr.responseText;
@@ -136,7 +136,7 @@ function createThrobber(element) {
 	throbber.setAttribute("height", throbberHeight);
 	element.appendChild(throbber);
 	throbber.ctx = throbber.getContext("2d");
-	throbber.ctx.fillStyle = "orange";
+	throbber.ctx.fillStyle = "hsl(from orange h s l)";
 	throbber.update = (percent) => {
 		throbber.ctx.fillRect(
 			0,
@@ -144,8 +144,9 @@ function createThrobber(element) {
 			(throbberWidth * percent) / 100,
 			throbberHeight,
 		);
+		throbber.ctx.fillStyle = "hsl(from orange calc(h + " + (90*percent/100) + ") s l)";
 		if (percent === 100) {
-			throbber.ctx.fillStyle = "green";
+			throbber.ctx.fillStyle = "hsl(from green h s l)";
 		}
 	};
 	throbber.update(0);