add basic loading bar

seleb · Dec 21, 2021 · 0557234 · 0557234
1 parent 6ca8ebb
commit 0557234
Showing 1 changed file with 36 additions and 29 deletions.
diff --git a/WebGLTemplates/BetterMinimal/index.html b/WebGLTemplates/BetterMinimal/index.html
@@ -45,7 +45,8 @@
 		<canvas id="unity-canvas" data-pixel-art="{{{ OPTIMIZE_FOR_PIXEL_ART }}}"></canvas>
 		<script src="Build/{{{ LOADER_FILENAME }}}"></script>
 		<script>
-			createUnityInstance(document.querySelector("#unity-canvas"), {
+			var canvas = document.querySelector("#unity-canvas");
+			var config = {
 				dataUrl: "Build/{{{ DATA_FILENAME }}}",
 				frameworkUrl: "Build/{{{ FRAMEWORK_FILENAME }}}",
 				codeUrl: "Build/{{{ CODE_FILENAME }}}",
@@ -59,43 +60,49 @@
 				companyName: "{{{ COMPANY_NAME }}}",
 				productName: "{{{ PRODUCT_NAME }}}",
 				productVersion: "{{{ PRODUCT_VERSION }}}",
-			}).then(function (instance) {
-				var canvas = instance.Module.canvas;
+			};
+			var scaleToFit;
+			try {
+				scaleToFit = !!JSON.parse("{{{ SCALE_TO_FIT }}}");
+			} catch (e) {
+				scaleToFit = true;
+			}
+			function progressHandler(progress) {
+				var percent = progress * 100 + '%';
+				canvas.style.background = 'linear-gradient(to right, white, white ' + percent + ', transparent ' + percent + ', transparent) no-repeat center';
+				canvas.style.backgroundSize = '100% 1rem';
+			}
+			function onResize() {
 				var container = canvas.parentElement;
-				function onResize() {
-					var w;
-					var h;
+				var w;
+				var h;
 
-					if (scaleToFit) {
-						w = window.innerWidth;
-						h = window.innerHeight;
+				if (scaleToFit) {
+					w = window.innerWidth;
+					h = window.innerHeight;
 
-						var r = {{{ HEIGHT }}} / {{{ WIDTH }}};
+					var r = {{{ HEIGHT }}} / {{{ WIDTH }}};
 
-						if (w * r > window.innerHeight) {
-							w = Math.min(w, Math.ceil(h / r));
-						}
-						h = Math.floor(w * r);
-					} else {
-						w = {{{ WIDTH }}};
-						h = {{{ HEIGHT }}};
+					if (w * r > window.innerHeight) {
+						w = Math.min(w, Math.ceil(h / r));
 					}
-
-					container.style.width = canvas.style.width = w + "px";
-					container.style.height = canvas.style.height = h + "px";
-					container.style.top = Math.floor((window.innerHeight - h) / 2) + "px";
-					container.style.left = Math.floor((window.innerWidth - w) / 2) + "px";
+					h = Math.floor(w * r);
+				} else {
+					w = {{{ WIDTH }}};
+					h = {{{ HEIGHT }}};
 				}
 
-				var scaleToFit;
-				try {
-					scaleToFit = !!JSON.parse("{{{ SCALE_TO_FIT }}}");
-				} catch (e) {
-					scaleToFit = true;
-				}
-				window.addEventListener('resize', onResize);
+				container.style.width = canvas.style.width = w + "px";
+				container.style.height = canvas.style.height = h + "px";
+				container.style.top = Math.floor((window.innerHeight - h) / 2) + "px";
+				container.style.left = Math.floor((window.innerWidth - w) / 2) + "px";
+			}
+			createUnityInstance(canvas, config, progressHandler).then(function (instance) {
+				canvas = instance.Module.canvas;
 				onResize();
 			});
+			window.addEventListener('resize', onResize);
+			onResize();
 		</script>
 	</div>
 </body>