[ACCEPTED]-jQuery UI: How to change the color of a ProgressBar?-progress-bar

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

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

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

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

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

For either 14 of these, you can use flat colors, or images. If 13 you use images, then be sure to set the 12 repeat-x. The code to do that, looks like 11 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 10 the colors. Now, if you want to dynamically 9 set the color of the bar as the value changes, you 8 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 7 demonstration: http://jsbin.com/atiwe3/3

Note:

If you want to override 6 the colors for all progressbars the css classes to use are 5 ui-widget-content, for the "background" or outer 4 div, and ui-widget-header for the actual bar (corresponding 3 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 2 the .ui-progressbar prefix, it will override the colors 1 of all UI widgets, including progressbars.

Use the following code:

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

0

jQuery Progressbar uses CSS and images.

Your 12 Stackoverflow answer says the same:

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

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

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

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

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

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

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

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

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

Because the working example on the accepted 3 answers seems not to be working, I leave 2 this one based in his answer in case anyone 1 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);
}