jQuery Plugin To Show Window Scroll In Percentage - progressIndicator

File Size: 6.44 KB
Views Total: 1562
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Show Window Scroll In Percentage - progressIndicator

progressIndicator is a jQuery plugin that creates a customizable, animated top (or bottom) progress bar showing the current window scroll depth in percentage.

How to use it:

1. Include the jQuery progressIndicator plugin's script after you've included the latest jQuery JavaScript library.

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

2. Just initialize the plugin and done.

$.progressIndicator();

3. Customize the progress indicator.

$.progressIndicator({
  direction : 'top', // or bottom
  target : 'body', // selector
  barColor: 'rgb(253, 191, 38)',
  easingSpeed : 0.5,
  height: 4,
});

4. Enable percentage display.

$.progressIndicator({
   percentageEnabled : true,
   percentageColor: '#222',
});

5. Callback functions.

$.progressIndicator({
  onStart : function(){
    // console.log("onStart");
  },
  onEnd : function(){
    // console.log("onEnd");
  },
  onProgress : function(perecent){
    // console.log(perecent);
  }
});

Change log:

2017-07-18

  • bugfixed

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