Smoothly Animated Scroll Progress Bar – page-progress

Category: Javascript | December 14, 2018
Author: bhaktijkoli
Views Total: 889
Official Page: Go to website
Last Update: December 14, 2018
License: MIT

Preview:

Smoothly Animated Scroll Progress Bar – page-progress

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'
  });
})()

You Might Be Interested In:


Leave a Reply