jQuery Scroll Progress Indicator For Any Containers - Prognroll

jQuery Scroll Progress Indicator For Any Containers - Prognroll
File Size: 11.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

ProngnRoll is a tiny jQuery plugin that creates a slim progress bar to indicate the scroll / reading progress of a specific scrollable container or the whole webpage.

How to use it:

1. Place the latest version of jQuery library (slim build is recommended) and the jQuery ProngnRoll plugin's script at the end of the html document.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="src/prognroll.js"></script>

2. Display a scroll progress indicator on the top of the webpage that auto updates depending on how much you've scrolled on the website.


3. Listen for the scroll events inside a specific container.


4. Stylize the progress bar.


  // Progress bar height

  // Progress bar background color

5. Place the progress bar at the bottom of the webpage.






  • JS update


  • get correct value of document


  • fix multiple elements issue


  • removed unnecessary styles.

This awesome jQuery plugin is developed by mburakerman. For more Advanced Usages, please check the demo page or visit the official website.