JavaScript Only Progress Bar Component

Category: Javascript , Loading | December 19, 2016
Views Total:2,038 views
Official Page:Go to website
Last Update:December 19, 2016


JavaScript Only Progress Bar Component


A lightweight, dependency- and CSS-free JavaScript library used for generating animated, customizable progress bars.

How to use it:

Download the progressbar.js and insert it into your web project.

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

Create a DIV container to place the progress bar.

<div id="progressbarCont"> </div>

Initialize the progress bar with default settings.


Available parameters:

  • elem: container element
  • speed: animation speed
  • start: start value
  • end: end value
  • style: custom CSS styles
  • callback: a callback which will be triggered when the progress is finished.
progressBar.init(elem, speed, start, end, style, callback);

Apply you own CSS styles to the progress bar:

progressBar.init("#progressbarCont", 50, 0, 100, {
 width : 500, 
 height : 40, 
 bgColor : "black", 
 radius : 10, 
 pbarColor : "red"


You Might Be Interested In:

Leave a Reply