Multipurpose Top Progress Bar With Pure JavaScript – progressbar.js

Category: Javascript , Loading | June 24, 2016
Author: MrSpark2591
Views Total: 3,057
Official Page: Go to website
Last Update: June 24, 2016
License: MIT

Preview:

Multipurpose Top Progress Bar With Pure JavaScript – progressbar.js

Description:

A pure plain JavaScript library used to create a fully configurable top progress bar for indicating the page loading status, ajax request and many more.

How to use it:

Download and place the progressbar.js script into the webpage.

<script src="progressbar.js"></script>

Show a default progress bar on the top of the webpage.

progressBar.progressBarStart();

Stop and hide the progress bar.

progressBar.progressBarStop();

Here’s a list of default configuration options which can be passed into the progress bar.

progressBar.config({

  // 1: stright line progress bar 
  // 2: progress bar width to be same as your percentage
  // 3: fix width bar progress bar
  // 4: recoil of pattern 3 
  // 5: recoil of pattern 1
  pattern : 1, 

  // color of progressbar
  color : "#FFD800", 

  // ms interval
  intervalAnmation : 20, 

  // height of progressbar
  height:  5,

  // z-index
  zIndex: 1000,

  // width of progressbar
  barWidth : 200
  
});

Execute a custom function before the progress bar starts.

progressBar.beforeProgressStart = function(){
  // do something
}

Execute a custom function after the progress is stoped.

progressBar.afterProgressStop = function(){
  // do something
}

You Might Be Interested In:


One thought on “Multipurpose Top Progress Bar With Pure JavaScript – progressbar.js

Leave a Reply