Smoothly Animated Scroll Progress Bar – page-progress

Preview:

Description:

The page-progress library creates an animated and sticky progress bar to visualize how far you scroll down the webpage.

Also can be used as a reading progress indicator that shows how much content is left without reading.

How to use it:

Download the page-progress plugin and insert the following JavaScript file into the webpage.

<script src="dist/js/page-progress.js"></script>

Create an empty container to hold the progress bar.

<div class="page-progress"></div>

Initialize the page-progress library to generate a default progress bar in the container you just created.

(function(){
  pagePrgoress('.page-progress');
})()

Customize the progress bar by passing the following options to the pagePrgoress function.

(function(){
  pagePrgoress('.page-progress',{
    // background color
    color: '#03A9F4',
    // height
    size: '5px',
    // or 'botton'
    position: 'top',
    // animation speed
    speed: '500'
  });
})()