Minimal Page Scroll Progress Bar Plugin - jquery.progress.js

The progress.js jQuery plugin lets you create a customizable slim page scroll progress bar on the top of bottom of the webpage.

The plugin will automatically and smoothly update the progress bar as you scroll down or up the webpage. The smooth animation based on the requestAnimationFrame API.

Can be used to Indicate how much of your article/post/any content has been read. 

How to use it:

1. Create an empty container to hold the page scroll progress bar.

<div id="progress"></div>

2. Include both jQuery library and the jquery.progress.js script right before the closing body tag.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jquery.progress.js"></script>

3. Call the function on the container element to create a default page scroll progress bar.

$(function(){

  $('#progress').progress();

});

4. Customize the appearance of the scroll progress bar.

$('#progress').progress({

  // height of the progress bar
  size: '2px',

  // or 'bottom'
  position: 'top',

  // background color
  wapperBg: '#eee',

  // inner color
  innerBg: '#50bcb6'
  
});

5. Customize the duration of the animation.

$('#progress').progress({

  duration: '.3s'

});

6. Customize the easing effect.

$('#progress').progress({

  effect: 'linear'

});

---

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