JavaScript Only Progress Bar Component

Preview:

Description:

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.

progressBar.init("#progressbarCont");

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"
});