Reading progress indicator

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

---

If you want more helpful content like this, feel free to follow me:

• DEV
• GitHub