Adding a reading progress bar to a website is a nice-to-have feature. It gives the users an indicator of how much of the article they have read and how much is still left to read.
Now, we know what you think. Can't users just look at the scrollbar on the right to check the reading progress?
Yes, they can. Alas, sometimes it is not so easy.
Many operating systems and applications have recently taken pride in hiding scrollbar and other useful hints from users. All in the name of a design that supposedly shows the information just in time when users need it.
This article doesn't judge such approaches. We just believe that in certain design situations, a simple, reading progress bar can be useful.
The approach discussed in this article was inspired by existing solutions.
They ranged from those using JavaScript to others written in pure CSS using before and after pseudo-elements.
Our version is different:
A simple reading progress bar is achieved with just 2 DIV elements and 1 clever trick.
It literally creates a gradient triangle that has the height of the article. As you scroll down, it gradually reveals the progress bar. And it hides it as you scroll up. This is NOT the rocket science.
We also added an extra DIV to display the percentage indicator.
We could do the obvious and show the code snippets. But we are sure that you, a fellow developer, know how to use a web browser's dev tools.
And don't worry. Even though the code is obvious, we have decorated it with comments. 😉