Dynamically change jQuery progress bar color

Question

I have a jQuery progress bar. I want the theme (documentation here ) to be dynamic: it will start in red, and then when it progresses, it will turn yellow, and finally green. It seems like it's just a matter of setting the color attribute of the style, but I cannot find what the corresponding attribute is.

Answer 1

The jQuery UI execution line does not have an explicit color set; instead, it inherits the background image of the "widget title" from your user interface theme. The easiest way to change the color is to customize the styles that override the background. For instance:

.ui-progressbar.beginning .ui-progressbar-value { background: red; } .ui-progressbar.middle .ui-progressbar-value { background: yellow; } .ui-progressbar.end .ui-progressbar-value { background: green; } 

(Alternatively, you can use different background images.) Then you simply change the class in the progress bar while adjusting its value:

 function updateProgressbar(current, target) { var value = parseInt(current / target * 100); $progressbar .progressbar("value", value) .removeClass("beginning middle end") .addClass(value < 40 ? "beginning" : value < 80 ? "middle" : "end"); } 

Working example.