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.

$("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:

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.