Scroll Progress Bar

A thin progress bar at the top of the page that fills as the user scrolls down. Great for long-form content and blog posts. Shows readers how much is left.

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #8b5cf6, #ec4899);
  z-index: 9999;
  transition: width 0.1s;
}