Scroll Indicator - CSS-Tricks

There is a way you can build a progress bar displaying how far a user has scrolled down the page (like a “reading progress indicator”) without any JavaScript at all. Just some clever usage of gradients and positioning.
There is a built-in browser feature for indicating your scroll position. Get this: it’s the scrollbar, and it does a great job. There is even a standardized way to style scrollbars these days.
You might want to combine those with -webkit- styles for the best browser support. For example:
But let’s say you weren’t as interested in styling the scrollbar as you were building your own indicator to show the user how far down they’ve scrolled. Like a progress bar that fills up as you approach the end of reading an article.
Mike Riethmuller found a way to do it that is extraordinarily clever!
It’s not only clever but is done with remarkably little code. To understand, let’s remove the white backgrounds on the header and the pseudo-element on the body revealing the linear-gradient used.
Ah ha! A diagonal gradient drawn with a hard stop. We can already see what’s happening here. As the page is scrolled down, the bit of this gradient that you can see becomes more and more filled with blue. The trick then becomes hiding everything but a small strip of this gradient, hence the solid backgrounds on the header and the pseudo-element, placed a few pixels apart.
Perhaps the most clever bit is how the gradient background is sized. You might think it just covers the entire background, but no. If you did that, the scrollbar would never complete because it is at the top of the page and the gradient completes at the bottom of the page. Because of this demos mid-page placement, the gradient needs to complete almost a full viewport-height short of the bottom. That would looke like:
Except the fixed header size factors in a well, so that needs to be subtracted. In the end, the code appears as if it has quite a few magic numbers in it. But they aren’t quite magical as most of them are related to each other genetically. Here’s a fork that turns them all into custom properties so you can see that.
If you want to do something really fancy, like display the percentage of how far you’ve scrolled through the page, or even fancier like showing an estimated reading time that is programmatically calculated, well, that’s all doable, but you’re in JavaScript territory.
Join our community of front-end nerds! You'll get into the Discord server and member-only perks and free swag.
Sign up to get front-end roundups, browser updates, and exclusive content sent to your inbox bi-weekly.
Get your t-shirts, prints, stickers, and yes, even mousepads at the brand-spankin' new CSS-Tricks store, now open.
CSS-Tricks is powered by a small team of real-life humans.
Handwritten. Twice a month. No spam. See past issues →