jquery.slicebar

Last week I spent a long time trying to find a jQuery plugin that I never found : a simple plugin, a bit like a progress bar but with multiple ‘slices’.

As often: as I could not find any, and it was simple enough to do, I decided to write my own…

I decided to name it jquery.slicebar. It is fairly basic but does the job : you just have to provide a model to the plugin (defining slices with there value, label, color and style) to get a nice rendition.

Here is an example:

jQuery(document).ready(function() { $('#slicebar2').slicebar({ max : 100, slices : [ { value: 20, label : 'Green plain slice', color : 'green', style : 'plain' }, { value: 20, label : 'Emtpy', style : 'empty' }, { value: 40, label : 'Orange gradient slice', color : 'orange', style : 'gradient' } ] }); });

And that is the result:

A live example is available here.

The project is hosted on github and you can check it out here (with documentation).

Originally published at https://blog.grousset.fr on July 14, 2012.