/page-progress

Page Progress - Javascript Library

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

Page Progress JS

A simple animated page progress bar.

screen recording 2018-12-04 at 7 38 20 pm

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.