Lightweight, JS-free, reading progress bar - HTML and Tailwind only

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.

When scrollbar is not enough

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.

To hide or not to hide?

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.

Existing solutions

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.

A few lines of code

Our version is different:

How does it work?

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.

Where's the code?

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. 😉