ProBars – jQuery animated progress bars plugin

Create stylish progress bars with jQuery animated progress bars plugin.

jQuery animated progress bars in action

ProBars is a jQuery / jQuery UI plugin to create animated progress bars. Choose one of many color styles and go!

jQuery animated progress bars plugin
jQuery animated progress bars plugin


Add “pro-bars.min.css”, “pro-bars.min.js” and “appear.min.js” to HTML document. We also need to create a simple HTML markup and a few select class names.

There are 2 data attributes we have to specify:

– data-pro-bar-percent (how far the bar will animate)

– data-pro-bar-delay (to set a delay on the animation)

Sample code:

<div class="pro-bar-container color-nephriti">
  <div class="pro-bar bar-50 color-emerald" 
    data-pro-bar-percent="50" data-pro-bar-delay="100">
    <div class="pro-bar-candy"></div>

The solution is compatible with modern browsers.


See also:

Animated circular progress bars with jQuery

A percentage loader jQuery plugin

Slim progress bar jQuery plugin – NProgress