Let’s do it !

First, you need an HTML node to display your progress bar :

<div class="progress-bar"></div>

Then, you need to customize it with CSS :

I commented everything to keep it easy to understand and to customize

Finally, you use Javascript to make the progress bar follow the scroll

Comments are not enough so I will explain:

Line 6 : Retrieve how much the user has scrolled down.

Retrieve how much the user has scrolled down. Line 9 : Look at this picture and at the explanation below it.

You want the progress bar to be filled entirely when the user has reached the bottom part of your long content.

It means that the scroll value must be equal to :

y position of the content + height of the content - browser height