Advertisement
  1. Web Design
  2. JavaScript

How to Build a Reading Progress Bar With CSS and JavaScript

by
Read Time:2 minsLanguages:

You may have noticed blogs which display a “reading progress indicator” (or progress bar) to let readers know how far through the content they’ve read, and how much content remains.

These indicators usually sit at the top of the page, and as you scroll down they get wider and wider until they fill the whole width. Progress bars like these are actually quite easy to implement with JavaScript; in this tutorial that’s exactly what we’re going to do!

Reading Progress Indicator

What We’ll Cover in This Tutorial

We’re going to use a JavaScript event listener to detect when the page is being scrolled. We’ll then calculate how far down the page the viewport window is. Once we have that percentage value, we’ll update a CSS variable (custom property) which styles the progress bar to display it at a certain width.

The following timestamps mark useful sections of the tutorial which you may want to revisit later on.

Our Progress Bar Demo

This is the reading progress bar you’ll create by following this tutorial:

 

Premium JavaScript Scripts and Plugins 

Explore the thousands of JavaScript plugins and templates on CodeCanyon. Purchase these high-quality JavaScript files and improve your website experience for you and your visitors. 

javascript plugins on CodeCanyon.javascript plugins on CodeCanyon.javascript plugins on CodeCanyon.

You’ve Built a Reading Progress Bar!

If you followed along you should now have a great little addition to your website, built with a bit of JavaScript and some CSS. And now you know what’s possible using the style.setProperty() method why not see what else you can change?

jQuery Progress Indicator

If you enjoyed this tutorial and want to build something similar, but you prefer to use jQuery, Jonathan Cutrell created exactly what you need–take a look!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.