From dd0962d1555527efe98e96c07b8da24db2b6547d Mon Sep 17 00:00:00 2001
From: wea_ondara <wea_ondara@cutiepie.at>
Date: Thu, 28 Sep 2023 19:17:30 +0200
Subject: [PATCH] make manga updates button look like a progress bar while
 updating

---
 src/components/navbar/MangaUpdatesUpdater.vue | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/navbar/MangaUpdatesUpdater.vue b/src/components/navbar/MangaUpdatesUpdater.vue
index f9c8fc3..e722af1 100644
--- a/src/components/navbar/MangaUpdatesUpdater.vue
+++ b/src/components/navbar/MangaUpdatesUpdater.vue
@@ -46,11 +46,21 @@ export default class MangaUpdatesUpdater extends Vue {
     this.progressValue = null;
     this.progressMax = null;
   }
+
+  get progressStyle(): any {
+    if (this.progressValue === null || this.progressMax === null) {
+      return {};
+    }
+    return {
+      '--progress-value': this.progressValue / this.progressMax,
+    };
+  }
 }
 </script>
 
 <template>
-  <button :disabled="!!progressType" class="btn btn-secondary" @click="onUpdateMangaUpdatesDb">
+  <button :disabled="!!progressType" class="btn btn-secondary progress-btn" :style="progressStyle"
+          @click="onUpdateMangaUpdatesDb">
     <i v-if="!progressType" class="fa fa-refresh"/>
     <template v-else>
       <span class="text-nowrap">
@@ -65,3 +75,14 @@ export default class MangaUpdatesUpdater extends Vue {
     </template>
   </button>
 </template>
+
+<style>
+.progress-btn {
+  --progress-value: 0;
+  background: linear-gradient(to right,
+  var(--bs-success),
+  var(--bs-success) calc(var(--progress-value) * 100%),
+  var(--bs-btn-bg) calc(var(--progress-value) * 100%),
+  var(--bs-btn-bg));
+}
+</style>