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

@@ -1,3 +1,19 @@
+export function getBaseUrl() {
+  try {
+    const lang = navigator.language || '';
+    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || '';
+    const inCN = /^zh-CN/i.test(lang) || tz.includes('Shanghai') || tz.includes('Beijing');
+
+    return inCN
+      ? 'https://gcore.jsdelivr.net/gh/douban-zoo/douban-zoo.github.io@gh-pages/'
+      : import.meta.env.BASE_URL;
+  } catch {
+    return import.meta.env.BASE_URL;
+  }
+}
+
+export const asset = (path: string) => getBaseUrl() + path.replace(/^\/+/, '');
+
 export const config = {
   numPages: 6,
   pageWidth: 2.5,

src/config.ts

@@ -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

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import gsap from 'gsap';
 import { get } from 'svelte/store';
-import { config, assets, getPageId } from '../config';
+import { config, assets, asset, getPageId } from '../config';
 import { playAudio } from '../utils/audios';
 import { VideoOverlayManager } from './VideoOverlayManager';
 import { currentPage } from '../store';
@@ -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 = asset(`imgs/${ this.pageId }/${ randomIndex }.png`);
           this.showPhoto(imagePath);
         }
       }