diff --git a/_includes/top.html b/_includes/top.html
index 3e0135c..94ba815 100755
--- 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
index d2025a9..924afc6 100644
--- a/_sass/groove.scss
+++ b/_sass/groove.scss
@@ -516,6 +516,37 @@ tbody tr:nth-child(odd) th {
     padding-left: 1em;
   }
 }
+.progress {
+  background-color: rgba(255, 255, 255, 0);
+  width: 100%;
+  height: 4px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 25;
+  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 {
@@ -559,6 +590,9 @@ tbody tr:nth-child(odd) th {
       font-size: 75%;
     }
   }
+  .progress {
+    height: 2px;
+  }
 }