Dynamically change the color of jQuery Progress Bar

Question

I have a JQuery progress bar I want to theme (documentation here) dynamically: it will start out red, then as it progresses turn yellow, and finally turn green. It seems like this would just be a matter of setting a style color attribute, but I can't seem to find what the appropriate attribute is.

Answer 1

The jQuery UI progress bar doesn't have an explicitly set color; instead, it inherits the "widget header" background image from your UI theme. The simplest way to change the color, then, is to set up styles which override the background. For example:

.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 could use different background images.) Then, you simply change the class on the progress bar when setting 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.