scroll progress

myst729 · Aug 14, 2023 · 6bf1e96 · 6bf1e96
1 parent 1b290f8
commit 6bf1e96
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/_includes/top.html b/_includes/top.html
@@ -1,3 +1,4 @@
+<div class="progress"></div>
 <div class="masthead">
   <div class="container">
     <h3 class="masthead-title serif">

diff --git a/_sass/groove.scss b/_sass/groove.scss
@@ -516,6 +516,37 @@ tbody tr:nth-child(odd) th {
     padding-left: 1em;
   }
 }
+.progress {
+  height: 3px;
+  background: blue;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 25;
+  width: 100%;
+  transform-origin: 0 50%;
+  animation: scaleProgress auto linear forwards, colorChange auto linear forwards;
+  animation-timeline: scroll(root);
+}
+@keyframes scaleProgress {
+  0% {
+    transform: scaleX(0);
+  }
+  100% {
+    transform: scaleX(1);
+  }
+}
+@keyframes colorChange {
+  0% {
+    background-color: red;
+  }
+  50% {
+    background-color: yellow;
+  }
+  100% {
+    background-color: lime;
+  }
+}
 
 .home-social,
 .masthead-social {