From c1a27b452d5820e74a4c5c7599caa0fb26ca0fe7 Mon Sep 17 00:00:00 2001
From: Menci <mencici@msn.com>
Date: Tue, 1 Jul 2025 02:03:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20shiny=20loading=20progress=20=E2=9C=A8?=
 =?UTF-8?q?=20(#252)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ResourceStatusIsland/LoadingProgress.vue  | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/apps/stage-tamagotchi/src/components/Widgets/ResourceStatusIsland/LoadingProgress.vue b/apps/stage-tamagotchi/src/components/Widgets/ResourceStatusIsland/LoadingProgress.vue
index 7a12d76e6..400fe952a 100644
--- a/apps/stage-tamagotchi/src/components/Widgets/ResourceStatusIsland/LoadingProgress.vue
+++ b/apps/stage-tamagotchi/src/components/Widgets/ResourceStatusIsland/LoadingProgress.vue
@@ -73,7 +73,13 @@ const totalProgress = computed(() => {
             absolute h-4 min-w-2 rounded-md will-change-width
             :style="{ width: `${file.value.progress}%` }"
             transition="width duration-500 ease-in-out"
-          />
+          >
+            <div
+              v-if="file.value.progress < 100"
+              absolute inset-0 origin-left rounded-md bg-white
+              class="progress-shine-animation"
+            />
+          </div>
           <div
             bg="neutral-100 dark:neutral-900" h-4 w-full rounded-md
           />
@@ -82,3 +88,21 @@ const totalProgress = computed(() => {
     </div>
   </div>
 </template>
+
+<style scoped>
+.progress-shine-animation {
+  animation: progress-shine 2s linear infinite;
+  will-change: transform, opacity;
+}
+
+@keyframes progress-shine {
+  0% {
+    opacity: 0.4;
+    transform: scale(0, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+}
+</style>