Page Progress JS

A simple animated page progress bar.

Setup

Include 'page-progress.min.js' in your html document

<script src="/path/to/page-progress.min.js"></script>

Usage

To add a page progress, add a element at the top for your html document

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

then via javascript pass the element selector to the pagePrgoress function

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

Details

The pageProgress function accepts two parameters, the selector and the page progress options object.

(function(){
  var options = {
    color: '#03A9F4',
    size: '5px',
    position: 'top',
    speed: '500',
  }
  pagePrgoress('.page-progress' , options);
})()

Options

Name	Type/Options	Default	Description
color	color	#03A9F4	The color of the progress bar.
size	property	5px	The size of the progress bar.
position	Top/Bottom	top	Position of the progress bar.
speed	Integer(ms)	500	Speed of the animation.