feat: add a countdown animation for offline note progress

2025-11-29 13:33:13 +01:00
parent 10dcd8717a
commit 11d4814f2f
2 changed files with 16 additions and 4 deletions
--- a/src/modules/note/components/CacheAllNote.vue
+++ b/src/modules/note/components/CacheAllNote.vue
@@ -19,7 +19,16 @@ const confirmBeforeCachingAllNotes = async () => {
      class="progress progress-accent w-56"
      :max="totalOfNotes"
    ></progress>
-    <div>{{ noteCompleted }}/{{ totalOfNotes }}</div>
+    <div>
+      <span class="countdown">
+        <span
+          :style="{ '--value': noteCompleted }"
+          aria-live="polite"
+          :aria-label="`${noteCompleted}`"
+          >{{ noteCompleted }}</span
+        ></span
+      >/{{ totalOfNotes }}
+    </div>
  </div>
  <button v-else class="button" @click="() => confirmBeforeCachingAllNotes()">
    <svg