Tweaking loading progress

Author: fabmax

live/demos/index.html

@@ -25,7 +25,6 @@
             left: 0;
             width: 100vw;
             height: 100vh;
-            //background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
             background: linear-gradient(135deg, #0a0a0a 0%, #202020 100%);
             display: flex;
             flex-direction: column;
@@ -114,6 +113,7 @@
         const progressBar = document.getElementById('progress-bar');
         const progressText = document.getElementById('progress-text');
         const loadingScreen = document.getElementById('loading-screen');
+        let progs = {}
 
         function updateProgress(progress, text) {
             progressBar.style.width = (progress * 100) + '%';
@@ -125,7 +125,7 @@
             setTimeout(() => { loadingScreen.style.display = 'none'; }, 500);
         }
 
-        async function fetchBlock(url, text, startProgress, stepProgress) {
+        async function fetchBlock(url, text) {
             let response = await fetch(url);
             const reader = response.body.getReader();
             const contentLength = +response.headers.get('Content-Length');
@@ -136,17 +136,18 @@
                     break;
                 }
                 receivedLength += value.length;
-                const progress = startProgress + (receivedLength / contentLength) * stepProgress;
-                updateProgress(progress, text)
+                progs[url] = receivedLength / contentLength;
+                const minimalProgress = Math.min(...Object.values(progs))
+                updateProgress(minimalProgress, text)
             }
         }
 
         updateProgress(0, 'Loading kool...');
 
         // Fetch essential files tracking progress before actually loading them - will be loaded from cache afterwards
-        await fetchBlock('kool-demo.js', 'Loading kool...', 0, 0.4)
-        await fetchBlock('assets/fonts/fira-sans-regular.png', 'Loading fonts...', 0.4, 0.6)
-        await fetchBlock('4ab48fc16bcbc6611bb2.wasm', 'Loading PhysX...', 0.6, 1.0)
+        fetchBlock('assets/fonts/fira-sans-regular.png', 'Loading kool...')
+        fetchBlock('4ab48fc16bcbc6611bb2.wasm', 'Loading kool...')
+        await fetchBlock('kool-demo.js', 'Loading kool...')
 
         const script = document.createElement('script');
         script.src = 'kool-demo.js';
@@ -160,4 +161,4 @@
         document.head.appendChild(script);
     </script>
 </body>
-</html>
+</html>