Slim Programmable Progress Bar Plugin - jQuery ProBar

ProBar is a small yet powerful jQuery progressbar plugin to visualize numeric data (percentage) in customizable, animated, horizontal, slim bars.

More features:

• Easy to customize using your own CSS.
• Configurable animation speed.
• Allows you to manipulate the progress bar programmatically.

How to use it:

1. To use the progress bar, just load the script ProBar.js after jQuery library and we're ready to go.

<!-- Require Jquery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Require ProBar.js -->
<script src="ProBar.js"></script>

2. Initialize the ProBar plugin to generate a default progress bar. You might need to specific a container in which you'd like to render the progress bar. Default: 'body'.

<div class="myProBar"></div>

var probar = new ProBar({
    wrapper : ".myProBar"
    wrapperId : "wrapperSetBar"
});

3. Start the progress bar and make it reach 100% in 5 seconds.

probar.goto(100,5);

4. Customize the background & bar colors.

var probar = new ProBar({
    wrapper : ".myProBar",
    color   : "#2a2a2a",
    bgColor : "#efefef
});

5. Customize the animation speed. Default: 0.3 (in seconds).

var probar = new ProBar({
    wrapper : ".myProBar",
    speed   : 0.5
});

6. By default the progress bar will auto dismiss after finished. You can turn off the auto dismiss functionality in the JavaScript.

var probar = new ProBar({
    finishAnimation : false
});

7. Available API methods which enable you to take full control over the progress bar.

// set the bar color
probar.setColor("#2980b9"); 

// set the background color
probar.setWrapperColor("#ecf0f1"); 

// set the animation speed
probar.setSpeed(3000);

// go to 100%
probar.goto(100); 

// reach 100% in 3 secondes
probar.goto(100,3); 

// disable the finish animation
probar.setFinishAnimation(false);

---

This awesome jQuery plugin is developed by YanDevDz. For more Advanced Usages, please check the demo page or visit the official website.