jQuery UI: How to make a multi colored ProgressBar? Segments colored differently

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 be green from 0% - 59%, yellow from 60% - 89%, and red from 90% - %100%.

Answer 1

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

Inorder to set different color to progressbar create set of class as i used in demo and set it to barClass

Demo

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