jQuery UI: How to change the color of a ProgressBa

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

jQuery Progressbar uses CSS and images.

Your Stackoverflow answer says the same:

there is a css entry called .ui-widget-overlay that references the image ui-bg_diagonals-thick_20_666666_40x40.png, which I think is the image that actually drives the progress bar. You will have to hack the css so that you can add a new class that references your new image in the other progress bar; I haven't figured out how to do that yet.

In order to change the color you would have to modify the png image.

Or as written above you could copy the image add a second class and add them using jquery:

$(progressBar).addClass('secondImage');

Answer 2

Because the working example on the accepted answers seems not to be working, I leave this one based in his answer in case anyone finds it useful.

https://jsfiddle.net/benjamintorr/a1h9dtkf/

$(function() {
  $( ".progressbar" ).each(function(i, obj) {
    $( this ).progressbar({
     value: false
    });
    $( this ).bind('progressbarchange', function(event, ui) {
     updateColors( this );
    });
   });
  $( "button" ).on("click", function(event) {
    $( ".progressbar" ).each(function(i, obj) {
      $( this ).progressbar("option", {
        value: Math.floor(Math.random() * 100)
      });
    });
  });
});

function updateColors( progressBar ) {
  var value = $( progressBar ).progressbar("value");
  if ( value > 50 ) {
    progressColor = "green";
  } else if (value > 10) {
    progressColor = "#FF9900";
  } else {
    progressColor = "red";
  }
  $( progressBar ).find(".ui-progressbar-value").css("background", progressColor);
}

Answer 3

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.

alt text http://i42.tinypic.com/mt5v6p.jpg

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.

Answer 4

Use the following code:

$( "#nahilaga" ).progressbar({
     value: 20,
     create: function(event, ui) {$(this).find('.ui-widget-header').css({'background-color':'red'})}
   });

Answer 5

One simple thing would be when you are initializing the progress bar with values in your js you do :

$(progressBarId).children().css('backgroud',) ;

Since you want different colors for different progressbars, you can do :

if($(progressBarId).value() <10 )
//set a color
if (..)
//set another color

I hope this answers your question. I tried doing what the guy has said in the first answer, but could not get it to work so tried this and it started working.