diff --git a/app/assets/stylesheets/shared.scss b/app/assets/stylesheets/shared.scss
index 3ca3ea1a3..83c7fdfe6 100644
--- a/app/assets/stylesheets/shared.scss
+++ b/app/assets/stylesheets/shared.scss
@@ -188,32 +188,25 @@
 }
 
 .navigation-progress {
+  --duration: 3600ms;
+  --delay: 250ms;
   position: fixed;
   top: 0;
-  // background: var(--accent-brand);
-  // box-shadow: 0 -2px var(--su-1) var(--accent-brand);
-  background: linear-gradient(
-    to right,
-    orange,
-    yellow,
-    green,
-    cyan,
-    blue,
-    violet
-  );
+  background: var(--accent-brand);
   z-index: 103;
   height: var(--su-1);
-  width: 0%;
+  width: 0;
   &.showing {
     display: block;
-    width: 100%;
-    animation: grow-width 3200ms ease-out;
+    animation: showProgressBar var(--duration) ease-in-out;
+    animation-delay: var(--delay);
+    animation-fill-mode: forwards;
   }
 }
 
-@keyframes grow-width {
+@keyframes showProgressBar {
   0% {
-    width: 0%;
+    width: 0;
   }
   100% {
     width: 100%;