Reading Progress Bar

In this article we're going to create a simple progress bar which will act as an indicator on how much a user scrolled on the website. It can be very useful for a blog or any kind of website where you might have some extra text.

This way the readers will know how much of the post remains, allowing them to manage their reading time providing a useful feedback as they scroll.

HTML:

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

As for the HTML markup we only need a div with a class (for CSS styling), and an id which will be used in JavaScript. Yes... in this post we're going to play around with some "fancy" JS! Yey! :D

CSS:

.progress {
    background-color: orangered;
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    z-index: 1000;
}

As you can see, we only need a little CSS code to style the progress bar. Basically we want it to be positioned fixed at the top of the page (or it can be on the bottom also, for that you would change the top property to bottom, as simple as that! ;) ). We also set a height of 4px and an initial width of 0%. This will be changed programmatically by JavaScript.

First, in JS we need to target the progress bar div, the body and the html (this is because there are some browser inconsistencies, and we want to handle them all).

let prog = document.getElementById('progress');

let body = document.body,
    html = document.documentElement;

let height = Math.max(
    body.scrollHeight,
    body.offsetHeight,
    html.clientHeight,
    html.scrollHeight,
    html.offsetHeight
);

As you can see we're using a little JS hack from a stackoverflow answer, to get the height of the client's browser.

const setProgress = () => {
    let scrollFromTop = (html.scrollTop || body.scrollTop) + html.clientHeight;
    let width = (scrollFromTop / height) * 100 + '%';

    prog.style.width = width;
};

We also need to create a function which will set the width of the progress bar to be: the amount the user scrolled + the client height(the height of the browser) divided by the total height of the page (this will return a number between 0 and 1, so we multiply it by 100 to get a percentage).

window.addEventListener('scroll', setProgress);

setProgress();

Lastly, we set the function to be called when the window's scroll event fires, and also once at the beginning when the scripts loads to calculate and set the width initially.

The entire JS:

let prog = document.getElementById('progress');

let body = document.body,
    html = document.documentElement;

let height = Math.max(
    body.scrollHeight,
    body.offsetHeight,
    html.clientHeight,
    html.scrollHeight,
    html.offsetHeight
);

const setProgress = () => {
    let scrollFromTop = (html.scrollTop || body.scrollTop) + html.clientHeight;
    let width = (scrollFromTop / height) * 100 + '%';

    prog.style.width = width;
};

window.addEventListener('scroll', setProgress);

setProgress();

That's all for this post... You can find a demo on Codepen.

Make sure you visit the google form I created to send me suggestions on what to cover next.

Happy coding! ^_^

Tagged with html5, css3, javascript