jQuery Scroll Progress Indicator For Any Containers - Prognroll

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.

$("body").prognroll();

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

$(".content").prognroll({
  custom:true
});

4. Stylize the progress bar.

$("body").prognroll({

  // Progress bar height
  height:5,        

  // Progress bar background color
  color:"#50bcb6"
  
});

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

$(".content").prognroll({

  position:"bottom"

});

Changelog:

2020-03-08

• Fix body scroll progress isuue

2020-03-06

• Removed unnecessary bar elements from dom

2019-07-21

• Fixed progress bar on custom element.

2019-03-20

• JS update

2017-06-25

• get correct value of document

2017-03-10

• fix multiple elements issue

2016-10-25

• 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.