-1

I"m using JQuery Progress-Bar and want to change the single color indicating progress to make it variable? Green to a lighter Green as you get closer to 100% .

Currenly- empty space is colored with White and filled space colored with Green.

$(progressBarID).progressbar({
        value: 60
    })
    .children('.ui-progressbar-value')
    .html("<span>" + completedValue + "</span>")
    .css({ display: "block", "text-align": "center", "background": progressBarColor });
samiaj
  • 421
  • 1
  • 5
  • 15

2 Answers2

0

I think you could do something similar to this:

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

This has a very nice example too.

Community
  • 1
  • 1
Neo
  • 3,309
  • 7
  • 35
  • 44
0

You can access the ProgressBar color using the .ui-progressbar-value class and change it's background to the desired color.

You can get the value of the ProgressBar using $('#progressbar').progressbar("value"); with #progressbar being your ProgressBar element id.

Now you should either use a switch statement to assign a color for a value between predefined limits (red when the value is between 0 and 25, orange when between 25 and 50 and so on) or use some math to dynamically define the RGB value depending on the value of the ProgressBar.

Here is an exemple code for defining the color based on the ProgressBar value :

var red = Math.ceil(255 - 255*value/100)*3;
if(red / 255 >= 1) {
  red = 255;
}

var green = Math.ceil(255*value/100)*2;
if(green / 255 >= 1) {
  green = 255;
}

var rgb = "rgb(" + red + ", " + green + ", 30)";
Dylfaen
  • 119
  • 4