Reading progress indicator

Written byPhuoc Nguyen

Created

18 Sep, 2023

If you're a web developer, you might want to add a reading progress indicator to your webpage. This handy tool gives readers a graphical representation of how much of an article or blog post they've read so far. It's especially helpful for longer content.

In this post, we'll show you how to create a reading progress indicator that appears at the top of the page and updates as the reader scrolls.

#HTML markup

To add a reading progress indicator to your webpage, start by adding some HTML markup. Simply create a `div` element with an `id` of `indicator` at the top of your webpage, like this:

<div id="indicator" class="indicator"></div>

#Basic styles

Let's give the indicator element some style. First, we'll position it fixed at the top of the page and set its height to 0.5rem. We'll also make it invisible by setting its width to 0.

But wait, there's more! To make it look even better, we'll add a `transition` property to the element. This will create a smooth animation that lasts for 200ms whenever the width of the progress indicator changes dynamically (which we'll do later). This will give it a polished and professional feel.

.indicator {
    position: fixed;
    top: 0;
    left: 0;

    width: 0;
    height: 0.5rem;

    background-color: rgb(99 102 241);
    transition: width .2s ease-in-out;
}

#Updating the progress indicator

To change the width of the indicator element as the user scrolls, we just need to add some JavaScript code. Whenever the user scrolls the webpage, the `scroll` event is triggered. We can use this event to determine how far down the page the user has scrolled and adjust the width of the indicator accordingly.

const indicatorEle = document.getElementById('indicator');

document.addEventListener('scroll', () => {
    const scrollHeight = document.body.scrollHeight;
    const clientHeight = document.body.clientHeight;
    const scrollTop = window.scrollY;
    const scrolled = (scrollTop / (scrollHeight - clientHeight)) * 100;

    indicatorEle.style.width = `${scrolled}%`;
});

Let's break down the code. We start by grabbing the indicator element using its `id`. Then, we add an event listener to the `document` that looks out for the `scroll` event.

Inside this event listener, we calculate four important values that tell us how much of the webpage has been scrolled:

The total height of the webpage (`scrollHeight`)
The height of the visible part of the webpage (`clientHeight`)
The current vertical position of the top edge of the visible portion in relation to the whole document (`scrollTop`)
The percentage of the page that has been scrolled (`scrolled`)

With these values, we can calculate how far down a user has scrolled and adjust the `width` property on our indicator accordingly. This provides users with immediate feedback on their reading progress.

Please take a moment to check out the live demo below.

#See also

Calculate the reading time of a webpage

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.

I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn