Scroll Progress Indicator Bar

A scroll progress indicator bar built with pure HTML and CSS that displays a horizontal bar reflecting how far the user has scrolled through a page, offering continuous visual feedback without relying on JavaScript or external libraries.

Usage

This component is ideal for experiences where reading or browsing progress matters, such as long articles, documentation pages, tutorials, blogs, or storytelling layouts where users benefit from knowing how much content remains.

Implementation

The progress effect is created using CSS width scaling, position-fixed layout, and scroll linked state styling, allowing the bar to expand proportionally as the user moves down the page while remaining lightweight and unobtrusive.

HTML

<div class="scroll-indicator">
  <span class="scroll-indicator__bar"></span>
</div>

<div class="scroll-indicator">
  <span class="scroll-indicator__bar"></span>
</div>

CSS

.scroll-indicator {
  width: 200px;
  height: 6px;
  background: rgba(0,0,0,0.0);
  border-radius: 999px;
  overflow: hidden;
}

.scroll-indicator__bar {
  display: block;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  border-radius: inherit;
  animation: scrollSim 2s ease-in-out infinite;
}

@keyframes scrollSim {
  0% { width: 10%; }
  50% { width: 90%; }
  100% { width: 10%; }
}

@media (prefers-color-scheme: dark) {
  .scroll-indicator {
    background: rgba(255,255,255,0.12);
  }
}

.scroll-indicator {
  width: 200px;
  height: 6px;
  background: rgba(0,0,0,0.0);
  border-radius: 999px;
  overflow: hidden;
}

.scroll-indicator__bar {
  display: block;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  border-radius: inherit;
  animation: scrollSim 2s ease-in-out infinite;
}

@keyframes scrollSim {
  0% { width: 10%; }
  50% { width: 90%; }
  100% { width: 10%; }
}

@media (prefers-color-scheme: dark) {
  .scroll-indicator {
    background: rgba(255,255,255,0.12);
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Shows continuous scroll completion feedback
• Stays visible without covering content
• Helps users gauge remaining page length
• Designed for reading focused layouts

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.