Adding Reading Progress Bar with Html, Css and Javascript

 

In this article, we will create a simple progress bar that will serve as an indicator of how far a user scrolled down the website. It can be very useful for a blog or any other type of website that has some extra text.

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

HTML code

In terms of HTML markup, all we need is a div with a class (for CSS styling) and an id that will be used in JavaScript. Yes, in this post, we'll experiment with some "fancy" JavaScript! YES! 

CSS Code

As you can see, we only need a few lines of CSS code to style the progress bar. Basically, we want it to be fixed at the top of the page (or it can be on the bottom as well; simply change the top property to bottom! 

JavaScript Coding

Coding success!