♻️ Refactor: refactor reading progress with css animation

assets/css/_partials/_widgets/_reading-progress.scss

@@ -1,13 +1,37 @@
 .reading-progress-bar {
-  --progress: 0;
+  height: var(--#{$prefix}progress-h, 2px);
-  height: var(--progress-h, 2px);
+  background-color: var(--#{$prefix}progress-bg, var(--#{$prefix}info));
-  width: var(--progress);
-  background-color: var(--bg-progress, var(--#{$prefix}info));
   position: fixed;
+  left: 0;
+  right: 0;
+  transform-origin: var(--#{$prefix}progress-start, left) 50%;
+  animation: grow-progress 3s linear;
+  animation-timeline: scroll();
   @include z-index(2);
   @extend .print-d-none;
+
+  &[data-reversed=true] {
+    animation-name: grow-progress-reversed;
+  }
   
   [data-theme="dark"] & {
-    background-color: var(--bg-progress-dark, var(--#{$prefix}info-dark));
+    background-color: var(--#{$prefix}progress-bg-dark, var(--#{$prefix}info-dark));
+  }
+
+  @keyframes grow-progress {
+    from { transform: scaleX(0); }
+    to { transform: scaleX(1); }
+  }
+  @keyframes grow-progress-reversed {
+    from { transform: scaleX(1); }
+    to { transform: scaleX(0); }
+  }
+
+  /**
+   * After the CSS property `animation-timeline: scroll()` exceeds 90% browser support in the future, this code can be removed
+   * See https://caniuse.com/mdn-css_properties_animation-timeline_scroll
+   */
+  @supports not (animation-timeline: scroll()) {
+    display: none;
   }
 }

assets/js/theme.js

@@ -1171,7 +1171,6 @@ class FixIt {
     const ACCURACY = 20;
     const $fixedButtons = document.querySelector('.fixed-buttons');
     const $backToTop = document.querySelector('.back-to-top');
-    const $readingProgressBar = document.querySelector('.reading-progress-bar');
     if (document.body.dataset.headerDesktop === 'auto') {
       $headers.push(document.getElementById('header-desktop'));
     }
@@ -1204,9 +1203,6 @@ class FixIt {
       });
       const contentHeight = document.body.scrollHeight - window.innerHeight;
       const scrollPercent = Math.max(Math.min(100 * Math.max(this.newScrollTop, 0) / contentHeight, 100), 0);
-      if ($readingProgressBar) {
-        $readingProgressBar.style.setProperty('--progress', `${scrollPercent.toFixed(2)}%`);
-      }
       // whether to show fixed buttons
       if ($fixedButtons) {
         if (scrollPercent > 1) {

layouts/partials/widgets.html

@@ -36,20 +36,20 @@
   {{- $readingProgress := .Site.Params.readingProgress -}}
   {{- if $readingProgress.enable -}}
     {{- with $readingProgress -}}
-      {{- $style := printf "%v: 0;%v: 0;" (.Start | default "left") (.Position | default "top") -}}
+      {{- $style := printf "--fi-progress-start: %v; %v: 0;" (.Start | default "left") (.Position | default "top")  -}}
       {{- if .Height | and (ne .Height "2px")   -}}
-        {{- $style = printf "%v--progress-h: %v;" $style .Height -}}
+        {{- $style = printf "%v --fi-progress-h: %v;" $style .Height -}}
-      {{- end -}}
-      {{- if .Reversed -}}
-        {{- $style = printf "%v%v" $style "width: calc(100% - var(--progress));" -}}
       {{- end -}}
       {{- if .Light -}}
-        {{- $style = printf "%v--bg-progress: %v;" $style .Light -}}
+        {{- $style = printf "%v --fi-progress-bg: %v;" $style .Light -}}
       {{- end -}}
       {{- if .Dark -}}
-        {{- $style = printf "%v--bg-progress-dark: %v;" $style .Dark -}}
+        {{- $style = printf "%v --fi-progress-bg-dark: %v;" $style .Dark -}}
       {{- end -}}
-      <div class="reading-progress-bar" {{ printf `style="%v"` $style | safeHTMLAttr }}></div>
+      <div class="reading-progress-bar"
+        {{- with .Reversed }} data-reversed="{{ . }}"{{ end }}
+        {{- printf ` style=%q` $style | safeHTMLAttr -}}
+      ></div>
     {{- end -}}
   {{- end -}}