CSS Scroll Progress Bar

How It Works

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #9F7AEA, #ED8936);
  transform-origin: left;
  animation: grow-bar linear;
  animation-timeline: scroll();
}

@keyframes grow-bar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

Summary

• animation-timeline: scroll() ties the animation progress to the scroll position of the page instead of a time-based duration.
• The @keyframes animation scales the bar from scaleX(0) to scaleX(1), visually filling from left to right.
• transform-origin: left ensures the bar grows from the left edge rather than expanding from the center.
• This replaces what previously required a scroll event listener, requestAnimationFrame, and manual percentage calculation — all in ~6 lines of CSS.
• Supported in Chrome 115+ (Jul 2023), Edge 115+, and Safari 18+ (Sep 2024). Firefox: behind flag.