added a subtle animation in the progress bar

extension/ui/content/content-ui.js

@@ -255,16 +255,18 @@ this.singlefile.ui = this.singlefile.ui || (() => {
 		let progressBarElement = document.querySelector(PROGRESS_BAR_TAGNAME);
 		if (!progressBarElement) {
 			progressBarElement = createElement(PROGRESS_BAR_TAGNAME, maskElement);
-			progressBarElement.style.setProperty("background-color", "white", "important");
-			progressBarElement.style.setProperty("background-image", "linear-gradient( -45deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .2) 75%, transparent 75%, transparent )", "important");
+			const styleElement = document.createElement("style");
+			maskElement.appendChild(styleElement);
+			styleElement.textContent = "@keyframes single-file-progress { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; }";
+			progressBarElement.style.setProperty("background", "white linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent) repeat scroll 0% 0% / 50px 50px padding-box border-box");
 			progressBarElement.style.setProperty("position", "fixed", "important");
 			progressBarElement.style.setProperty("top", "0", "important");
 			progressBarElement.style.setProperty("left", "0", "important");
 			progressBarElement.style.setProperty("width", "0", "important");
 			progressBarElement.style.setProperty("height", "8px", "important");
 			progressBarElement.style.setProperty("transition", "width 50ms", "important");
-			progressBarElement.style.setProperty("will-change", "width", "important");
-			progressBarElement.style.setProperty("animation", "single-file-progress 2s linear infinite");
+			progressBarElement.style.setProperty("will-change", "width, background-position", "important");
+			progressBarElement.style.setProperty("animation", "single-file-progress 5s linear infinite reverse");
 		}
 		return progressBarElement;
 	}