JQuery UI: How to make a multi-color ProgressBar? Differently colored segments

Question

<script type="text/javascript"> $(function() { $("#progressbar").progressbar({ value: 35 }); }); </script> <div id="progressbar"> </div> 

code taken from: jQuery UI: How to change the color of a ProgressBar?

To make the question clearer: I want the progress bar to have segments, and they should be green from 0% to 59%, yellow from 60% to 89% and red from 90% - 100%.

Answer 1

You can do this with jquery.ui.multiprogressbar.js.

Inorder, to set a different color in the progressbar, create a set of classes, as I used in the demo, and set it to barClass

Demo

  $('#plain').multiprogressbar({ parts: [ {value: 59,barClass: "green"}, {value: 30,barClass: "yellow"}, {value: 11,barClass: "red"}] });