jQuery UI Multi-Progressbar

The multiprogressbar plugin provides a progress bar based on the basic jQuery UI progress bar widget but with the ability to split the progress into parts. Each part got it's own progress value and can be styled differently by providing class(es).

Demo:

Initialization & Usage Example

Similar to the basic progress bar, the multiprogressbar is created from a div element. The parts of the progress are provided as an array of objects and they are created in the order they appear within the array. The properties of the part objects are given in the section Options below.

Note: If the sum of the progress values exceeds 100, the progress will be truncated at 100 and the remaining parts will not be shown.

Example:

// Initialize the multiprogressbar
$('#MultiProgressBarDiv').multiprogressbar({
    parts: [{value: 10, text: true, barClass: 'FirstPartClass'}, // First part: 10% progress, display progress, use class 'FirstPartClass' for the bar
            {value: 20, text: 'Critical', textClass: 'redText'}, // Second part: 20% progress, display the text 'Critical', use class 'redTest' for the text
            {value: 35, barClass: 'ThirdPartClass ExtraClass'}], // Third part: 35% progress, use classes 'ThirdPartClass' and 'ExtraClass' for the bar
    complete: function() { alert('Full!'); } // Bind to the complete event during initialization
});

// Bind to the complete event after initialization
$('#MultiProgressBarDiv').bind('multiprogressbarcomplete', function() { alert('Complete!'); });

// Get the total progress
var total = $('#MultiProgressBarDiv').multiprogressbar('total');

More Demos

The demo folder contains a demonstration of most of the features of the multiprogressbar plugin.

Live demos can be found at jsFiddle and JS Bin which can be used to play around with the plugin.

Documentation

The documentation of all the options, methods and events can be found in the README on GitHub.

Requirements

The plugin requires

jQuery 1.4.1+
jQuery UI 1.8+ (including the progressbar widget)
an "outerHTML" jQuery plugin like the one from Ca-Phun Ung (http://www.yelotofu.com/2008/08/jquery-outerhtml) that provides the outer HTML using a method with the name outerHTML

Compatibility

The plugin has been successfully tested with jQuery 1.7.2 and jQuery UI 1.8.20 and it should be compatible with future versions as long as the implementation of the jQuery UI progressbar does not change significantly.

The plugin has also been tested to be compatible with jQuery Mobile 1.1.0 (using the jQuery UI progressbar widget) and it should be compatible with future versions as long as jQuery Mobile does not introduce a progressbar widget that significantly differs from the one provided by jQuery UI.

Licensing

Licensed under the MIT license.