chore: loading icon

Author: anig1scur

public/imgs/meidi.png

@@ -38,6 +38,35 @@ body {
   }
 }
 
+
+.loading-container {
+  position: relative;
+  width: 90%;
+  max-width: 600px;
+  height: 8px;
+  border-radius: 6px;
+}
+
+#loading-bar {
+  width: 0%;
+  height: 100%;
+  background-color: #ffe65a;
+  transition: width 0.2s ease;
+  height: 100%;
+  border-radius: 4px;
+  position: relative;
+}
+
+#loading-bar::after {
+  content: "";
+  position: absolute;
+  top: -65px;
+  right: -15px;
+  width: 60px;
+  height: 60px;
+  background: url("/imgs/meidi.png") no-repeat center / contain;
+}
+
 #loading-overlay {
   position: fixed;
   top: 0;
@@ -52,19 +81,16 @@ body {
   transition: opacity 0.1s ease-out;
 }
 
-.loading-container {
-  width: 80%;
-  max-width: 400px;
-  height: 8px;
-  border-radius: 6px;
-  overflow: hidden;
+
+
+@keyframes dog-jump {
+  0%   { transform: translateY(0); }
+  30%  { transform: translateY(-20px); }
+  60%  { transform: translateY(0); }
+  80%  { transform: translateY(-10px); }
+  100% { transform: translateY(0); }
 }
 
-#loading-bar {
-  width: 100%;
-  height: 100%;
-  background-color: #ffe65a;
-  transform: scaleX(0);
-  transform-origin: left;
-  transition: transform 0.2s ease;
+#loading-bar.done::after {
+  animation: dog-jump 0.6s ease-out;
 }

src/app.css

@@ -102,17 +102,20 @@ export class BookScene {
 
     this.loadingManager.onProgress = (url, itemsLoaded, itemsTotal) => {
       const progressRatio = itemsLoaded / itemsTotal;
-      (loadingBar as HTMLElement).style.transform = `scaleX(${ progressRatio })`;
+      (loadingBar as HTMLElement).style.width = `${ progressRatio * 100 }%`;
     };
 
     this.loadingManager.onLoad = () => {
+      (loadingBar as HTMLElement).classList.add("done");
+
       setTimeout(() => {
         this.renderable = true;
       }, 200);
 
       gsap.to(loadingOverlay, {
         opacity: 0,
-        duration: 1,
+        duration: 0.3,
+        delay: 0.3,
         onComplete: () => {
           loadingOverlay.style.visibility = 'hidden';
         }

src/lib/BookScene.ts

@@ -324,7 +324,7 @@ export class IconManager {
         const photoCount = assets.media[get(currentPage)]?.photo || 0;
         if (photoCount > 0) {
           const randomIndex = Math.floor(Math.random() * photoCount) + 1;
-          const imagePath = `/imgs/${ this.pageId }/${ randomIndex }.png`;
+          const imagePath = `imgs/${ this.pageId }/${ randomIndex }.png`;
           this.showPhoto(imagePath);
         }
       }