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. It's actually quite easy to make a progress bar in JavaScript, and in this video, that’s exactly what you'll learn how to do!

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[DeLaRic]

Very cool tutorial. Is it possible to change the look of the scrollbar and the mouse cursor?

[Bertvanengel]

You did a very good tutorial - clear and good to follow. Thank you!

[g.gardiner]

I cannot thank you enough for this! Hours of struggle. This was amazing.