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

Question

I've set up a simple jQueryUI progressbar:

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

<div id="progressbar">  </div>

Now, I'd like to color the of the bar based on it's value (e.g. <10 red, <50 yellow, >50 green). How do I do this?

Note: There are similar questions, but the answers were not clear enough to help me get things done. Hopefully, someone can point out an easier way or provide more detailed instructions. Thanks.

Answer 1

I fiddled around with it and here's what I found. Using jQuery UI v1.8rc3, I can override the theme colors for the progress bar.

Here's how: When you add a progressbar widget to a div, with something like:

$("#mydiv").progressbar({value:0});

...the jQuery UI progressbar creates a div within your div; this inner div represents the value bar. To set the color of the bar, set the background of the child (inner) div.

You can also set the color of the empty space in the progress bar, the space to the right of the value bar. Do this by setting the background of the outer div.

For either of these, you can use flat colors, or images. If you use images, then be sure to set the repeat-x. The code to do that, looks like this:

html:

<div id='mainObj' class="inputDiv">
  <div id='pbar0' style="height: 20px;"></div>
  <div id='pbar1' style="height: 20px;"></div>
  <div id='pbar2' style="height: 20px;"></div>
  <div id='pbar3' style="height: 20px;"></div>
</div>

js:

function init(){
    // four progress bars
    $("#pbar0").progressbar({ "value": 63 });
    $("#pbar1").progressbar({ "value": 47 });
    $("#pbar2").progressbar({ "value": 33 });
    $("#pbar3").progressbar({ "value": 21 });

    // the zero'th progressbar gets the default theme

    // set colors for progressbar #1
    $("#pbar1").css({ 'background': 'url(images/white-40x100.png) #ffffff repeat-x 50% 50%;' });
    $("#pbar1 > div").css({ 'background': 'url(images/lime-1x100.png) #cccccc repeat-x 50% 50%;' });

    // set colors for progressbar #2
    $("#pbar2").css({ 'background': 'url(images/lt-blue-40x100.png) #ffffff repeat-x 50% 50%' });
    $("#pbar2 > div").css({ 'background': 'url(images/dustyblue-1x100.png) #cccccc repeat-x 50% 50%' });

    // set colors for progressbar #3
    $("#pbar3").css({ 'background': 'LightYellow' });
    $("#pbar3 > div").css({ 'background': 'Orange' });
}

ok, that takes care of setting the colors. Now, if you want to dynamically set the color of the bar as the value changes, you hook the progressbarchange event, like this:

    $("#pbar0").bind('progressbarchange', function(event, ui) {
        var selector = "#" + this.id + " > div";
        var value = this.getAttribute( "aria-valuenow" );
        if (value < 10){
            $(selector).css({ 'background': 'Red' });
        } else if (value < 30){
            $(selector).css({ 'background': 'Orange' });
        } else if (value < 50){
            $(selector).css({ 'background': 'Yellow' });
        } else{
            $(selector).css({ 'background': 'LightGreen' });
        }
    });

Working demonstration: http://jsbin.com/atiwe3/3

---

Note:

If you want to override the colors for all progressbars the css classes to use are ui-widget-content, for the "background" or outer div, and ui-widget-header for the actual bar (corresponding to the inner div). Like this:

  .ui-progressbar.ui-widget-content {
     background: url(images/white-40x100.png) #ffffff repeat-x 50% 50%;
  }

  .ui-progressbar.ui-widget-header {
     color: Blue;
     background: url(images/lime-1x100.png) #cccccc repeat-x 50% 50%;
  }

If you eliminate the .ui-progressbar prefix, it will override the colors of all UI widgets, including progressbars.