How to Build a Reading Progress Bar with CSS and JavaScript

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.

• Introduction
• Our progress bar demo
• Adding progress bar markup and basic CSS styles
• Where the magic happens: our JavaScript
• Another way of styling the progress bar

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. 

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!

• 
  jQuery
  How to Build a Page Scroll Progress Indicator With jQuery and SVG
  Jonathan Cutrell