JavaScript Only Progress Bar Component

Category: Javascript , Loading | December 19, 2016
Author: sumanbogati
Views Total: 3,083
Official Page: Go to website
Last Update: December 19, 2016
License: MIT

Preview:

JavaScript Only Progress Bar Component

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

 

You Might Be Interested In:


Leave a Reply