Multipurpose Top Progress Bar With Pure JavaScript – progressbar.js

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
}