Multipurpose Top Progress Bar With Pure JavaScript – progressbar.js

Category: Javascript , Loading | June 24, 2016
Views Total:1,668 views
Official Page:Go to website
Last Update:June 24, 2016


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.


Stop and hide the progress bar.


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

  // 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