added progress bar in the shadow

extension/core/content/content.js

@@ -145,13 +145,12 @@ this.singlefile.top = this.singlefile.top || (() => {
 			options.framesData = await FrameTree.getFramesData();
 		}
 		options.jsEnabled = true;
-		let indexLoaded = 0;
 		options.onprogress = event => {
 			if (event.type == event.RESOURCES_INITIALIZED || event.type == event.RESOURCE_LOADED) {
-				if (event.type == event.RESOURCE_LOADED) {
-					indexLoaded = event.details.index;
+				browser.runtime.sendMessage({ processProgress: true, index: event.details.index, maxIndex: event.details.max });
+				if (options.shadowEnabled) {
+					singlefile.ui.onprogress(event);
 				}
-				browser.runtime.sendMessage({ processProgress: true, index: indexLoaded, maxIndex: event.details.max });
 			} else if (event.type == event.PAGE_ENDED) {
 				browser.runtime.sendMessage({ processEnd: true });
 			}

extension/ui/content/ui.js

@@ -23,6 +23,7 @@
 this.singlefile.ui = this.singlefile.ui || (() => {
 
 	const MASK_TAGNAME = "singlefile-mask";
+	const PROGRESS_BAR_TAGNAME = "singlefile-progress-var";
 
 	return {
 		init() {
@@ -39,9 +40,28 @@ this.singlefile.ui = this.singlefile.ui || (() => {
 				maskElement.style.zIndex = 2147483647;
 				maskElement.style.opacity = 0;
 				maskElement.style.transition = "opacity 250ms";
-				document.body.appendChild(maskElement);
 				maskElement.offsetWidth;
 				maskElement.style.opacity = .3;
+				const progressBarElement = document.createElement(PROGRESS_BAR_TAGNAME);
+				progressBarElement.style.all = "unset";
+				progressBarElement.style.position = "fixed";
+				progressBarElement.style.top = "0px";
+				progressBarElement.style.left = "0px";
+				progressBarElement.style.height = "8px";
+				progressBarElement.style.width = "0%";
+				progressBarElement.style.backgroundColor = "white";
+				progressBarElement.style.transition = "width 50ms";
+				document.body.appendChild(maskElement);
+				maskElement.appendChild(progressBarElement);
+			}
+		},
+		onprogress(event) {
+			const progressBarElement = document.querySelector(PROGRESS_BAR_TAGNAME);
+			if (progressBarElement) {
+				const width = Math.floor((event.details.index / event.details.max) * 100) + "%";
+				if (progressBarElement.style.width != width) {
+					progressBarElement.style.width = Math.floor((event.details.index / event.details.max) * 100) + "%";
+				}
 			}
 		},
 		end() {