Multiple scroll progress indicators -- scroll down to see them in action
Scroll progress indicators provide visual feedback about how far a user has scrolled through the page content. They help orient users within long documents and create a sense of progression.
This demo showcases four different indicator styles that can be toggled independently using the controls at the top of the page.
A horizontal bar fixed to the top of the viewport is one of the most common scroll progress patterns. It provides an unobtrusive yet clearly visible indication of scroll position.
The width of the bar corresponds directly to the percentage of the page that has been scrolled, creating an intuitive mapping between physical scrolling and visual feedback.
The circular progress indicator in the bottom-right corner uses an SVG circle with animated stroke-dashoffset to create a ring that fills as the user scrolls.
It also displays a numeric percentage, giving users a precise reading of their scroll position within the page.
A vertical sidebar that fills from top to bottom mirrors the natural scrolling direction. It sits on the left edge of the viewport and provides a vertical progress indication.
This style is particularly effective for reading-heavy content where vertical progress is more intuitive than horizontal.
Navigation dots along the right edge highlight the currently visible section. Clicking a dot scrolls smoothly to the corresponding section.
This pattern works best for content that is divided into distinct sections, providing both progress feedback and quick navigation.
Using the toggle buttons at the top, you can enable or disable each indicator independently. Different combinations work best for different use cases.
For a minimal approach, a single top bar might suffice. For a rich reading experience, combining the circle indicator with section dots creates both macro and micro navigation cues.