Slim Programmable Progress Bar Plugin - jQuery ProBar

File Size: 4.09 KB
Views Total: 1332
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


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

// set the background color

// set the animation speed

// go to 100%

// reach 100% in 3 secondes

// disable the finish animation

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