Introduction
Scroll progress indicators give readers a sense of how much content remains. They're subtle but effective — especially on long articles like this one.
Why use it?
Readers on the web skim. A progress bar tells them "you're 40% through" which reduces bounce rate on long content. Medium, Substack, and many blogs use this pattern.
Implementation
The formula is simple: scrollY / (documentHeight - windowHeight). Apply the result as a percentage width on a fixed bar.
Variations
Some sites use a circular progress ring. Others tie it to a specific article container rather than the whole page. CSS scroll-driven animations can do this with zero JavaScript now.
Accessibility
Add role="progressbar" with aria-valuenow so screen readers can announce progress. Keep the bar thin (2–4px) so it doesn't distract.
Keep scrolling
There's more content below to demonstrate the effect. Watch the purple bar at the top grow as you read.
Almost there
When you reach the bottom, the bar will be fully filled. This is a satisfying micro-feedback loop for readers.
The end
You made it! The progress bar should now be at 100%. Simple, useful, and easy to implement.