feat: fix progress bar

dewanakl · Oct 5, 2023 · 66a0778 · 66a0778
1 parent 5b31d24
commit 66a0778
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -486,8 +486,12 @@ <h1 class="font-esthetic my-4" style="font-size: 2.5rem;">Wahyu & Riski</h1>
     <!-- Loading page -->
     <div class="loading-page" id="loading" style="opacity: 1;">
         <div class="d-flex justify-content-center align-items-center" style="height: 100vh !important;">
-            <div class="progress w-75" role="progressbar">
-                <div class="progress-bar" id="bar" style="width: 0%">0%</div>
+            <div class="text-center w-75">
+                <img class="img-fluid mb-3" src="./assets/images/icon-192x192.png" alt="icon" style="width: 3.5rem;">
+                <div class="progress" role="progressbar" style="height: 0.5rem;">
+                    <div class="progress-bar" id="bar" style="width: 0%"></div>
+                </div>
+                <small class="mt-1" id="progress-info">Loading asset</small>
             </div>
         </div>
     </div>

diff --git a/js/app.js b/js/app.js
@@ -1,5 +1,4 @@
 const progressBar = (() => {
-    const bar = document.getElementById('bar');
     const assets = document.querySelectorAll('img');
 
     let totalAssets = assets.length;
@@ -8,11 +7,19 @@ const progressBar = (() => {
     const progress = () => {
         const progressPercentage = Math.min((loadedAssets / totalAssets) * 100, 100);
 
-        bar.style.width = progressPercentage.toString() + "%";
-        bar.innerText = `${progressPercentage.toFixed(0)}%`;
+        document.getElementById('bar').style.width = progressPercentage.toString() + "%";
+        document.getElementById('progress-info').innerText = `Loading asset (${loadedAssets}) [${progressPercentage.toFixed(0)}%]`;
 
         if (loadedAssets == totalAssets) {
+            if ('scrollRestoration' in history) {
+                history.scrollRestoration = 'manual';
+            }
+
+            document.body.scrollTop = 0;
+            document.documentElement.scrollTop = 0;
+
             window.scrollTo(0, 0);
+
             tamu();
             opacity('loading');
         }
@@ -823,6 +830,7 @@ const buka = async () => {
     opacity('welcome');
     document.getElementById('tombol-musik').style.display = 'block';
     AOS.init();
+    audio.play();
 
     await confetti({
         origin: { y: 0.8 },
@@ -832,7 +840,6 @@ const buka = async () => {
 
     await login();
     timer();
-    audio.play();
 };
 
 // OK