How to display a scroll progress bar in your website using PrognRoll and jQuery in JavaScript

Have you ever been in a Website where the scroll seems to be endless and you read and read and the document doesn't simply stops ? Lately a lot of websites (mainly pages where long articles are published) have started to implement a kind of indicator that displays in a progress bar located in the top of the document that updates when the user scrolls down. The progress depends of how far you have scrolled down on the article, pretty simple and cool featured, don't you think ? This helps the user to know how far he's from finish the publication. A lot of designers say that the progress bar on the top it's useful and it combines with the design of the web page, however the developers see this feature as useless because there's already a scroll bar, whose progress is almost the same that the bar on the top. What side are you on ?

If you are looking for the implementation of such a feature in your website using a jQuery plugin, then you're in the right place. In this article, we are going to explain how to use the jQuery plugin PrognRoll to create this progress bar in the window.

Download and include PrognRoll

PrognRoll is a a tiny, lightweight jQuery plugin that creates scroll progress bar on the page. It's usage and customization is pretty easy and it only weights 966 Bytes minified, which makes it more awesome.

To use PrognRoll, download the source code file or minified in the repository. Then add the reference to the script with a script tag:

<script src="jquery.js"></script>
<script src="src/prognroll.js"></script>

As you can see, PrognRoll only requires a script file, the customization (width and background color of the progress bar) can be made directly with JavaScript.

If you're willing to test the library, you can simply use the CDN:

<!-- jQuery as dependency -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- Include PrognRoll -->
<script src="https://cdn.rawgit.com/mburakerman/prognroll/master/src/prognroll.js"></script>

For more information, visit the official repository of the project in Github here.

Using PrognRoll

The usage of PrognRoll is really simple, it will take care of the creation of the progress bar so you don't need to add extra markup. The plugin can be initialized in 2 different ways, either to follow the entire document or a custom element that can be scrolled in your document:

Progress bar in the document

To create a scroll progress bar in the entire document, just select the body element of the document with jQuery an initialize the plugin on it:

$("body").prognroll({
    //Progress bar height
    height: 5,        
    
    //Progress bar background color
    color: "#03a9f4",

    // If you make it true, you can add your custom div and see it's scroll progress on the page	
    custom: false     
});

Progress bar in custom element

If instead of measure the progress of the entire document, you can show the progress of a custom element by selecting your element with jQuery and then apply the plugin on it. Remember to set the custom property to true:

$(".custom-element").prognroll({
    //Progress bar height
    height: 5,        
    
    //Progress bar background color
    color: "#03a9f4",

    // Using custom element instead of the body
    custom: true     
});

Happy coding !