Changes scroll progress to behave differently when fetching scroll back content. (#640)

assets/components/ScrollProgress.vue

@@ -1,15 +1,22 @@
 <template>
   <div class="scroll-progress">
-    <svg width="100" height="100" viewBox="0 0 100 100">
+    <svg width="100" height="100" viewBox="0 0 100 100" :class="{ indeterminate }">
       <circle r="44" cx="50" cy="50" :style="{ '--progress': scrollProgress }" />
     </svg>
     <div class="is-overlay columns is-vcentered is-centered has-text-weight-light">
-      <span class="column is-narrow is-paddingless is-size-2">
-        {{ Math.ceil(scrollProgress * 100) }}
-      </span>
-      <span class="column is-narrow is-paddingless">
-        %
-      </span>
+      <template v-if="indeterminate">
+        <div class="column is-narrow is-paddingless is-size-2">
+          &#8734;
+        </div>
+      </template>
+      <template v-else>
+        <span class="column is-narrow is-paddingless is-size-2">
+          {{ Math.ceil(scrollProgress * 100) }}
+        </span>
+        <span class="column is-narrow is-paddingless">
+          %
+        </span>
+      </template>
     </div>
   </div>
 </template>
@@ -20,6 +27,16 @@ import throttle from "lodash.throttle";
 
 export default {
   name: "ScrollProgress",
+  props: {
+    indeterminate: {
+      default: false,
+      type: Boolean,
+    },
+    autoHide: {
+      default: true,
+      type: Boolean,
+    },
+  },
   data() {
     return {
       scrollProgress: 0,
@@ -39,6 +56,9 @@ export default {
       this.detachEvents();
       this.attachEvents();
     },
+    indeterminate() {
+      this.$nextTick(() => this.onScroll());
+    },
   },
   computed: {
     ...mapState(["activeContainers"]),
@@ -54,16 +74,18 @@ export default {
     onScroll() {
       const p = this.parentElement == document ? document.documentElement : this.parentElement;
       this.scrollProgress = p.scrollTop / (p.scrollHeight - p.clientHeight);
-      this.animation.cancel();
-      this.animation = this.$el.animate(
-        { opacity: [1, 0] },
-        {
-          duration: 500,
-          delay: 2000,
-          fill: "both",
-          easing: "ease-out",
-        }
-      );
+      if (this.autoHide) {
+        this.animation.cancel();
+        this.animation = this.$el.animate(
+          { opacity: [1, 0] },
+          {
+            duration: 500,
+            delay: 2000,
+            fill: "both",
+            easing: "ease-out",
+          }
+        );
+      }
     },
   },
 };
@@ -79,10 +101,46 @@ export default {
     transform: rotate(-90deg);
     transform-origin: 50% 50%;
     stroke: var(--primary-color);
-    stroke-dashoffset: calc(276.32px - var(--progress) * 276.32px);
+    stroke-dashoffset: calc(276.32 - var(--progress) * 276.32);
     stroke-dasharray: 276.32px 276.32px;
+    stroke-linecap: round;
     stroke-width: 3;
     will-change: stroke-dashoffset;
   }
+
+  svg.indeterminate {
+    animation: 2s linear infinite svg-animation;
+
+    circle {
+      animation: 1.4s ease-in-out infinite both circle-animation;
+    }
+  }
+}
+
+@keyframes svg-animation {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+@keyframes circle-animation {
+  0%,
+  25% {
+    stroke-dashoffset: 275;
+    transform: rotate(0);
+  }
+  50%,
+  75% {
+    stroke-dashoffset: 70;
+    transform: rotate(45deg);
+  }
+
+  100% {
+    stroke-dashoffset: 275;
+    transform: rotate(360deg);
+  }
 }
 </style>