Use JQuery to Change Progress Bar Color based on Value
Solution: The solution here is to utilize JQuery’s ability to alter the CSS of an HTML element. Check out my Pen to see it in action. Or simply check out the code below:[https://gist.github.com/SIRHAMY/d15aafeb1a788d2f071f]
In a progress bar, the property that determines the color is ‘background-color’. As you can see in ‘progressbar.js’, we’re using JQuery to select the HTML element with ID == ‘progressbar’ and then altering its CSS.
When only altering one property, we pass in the property we’re trying to change (‘background-color’) as well as the value we’re trying to set it to, here a variable we’ve set to a hexadecimal color value based on the value of ‘someValueToCheck’.
Of course, you could use a similar tactic to change other things on the progress bar as well, such as
- Completion: ‘aria-valuenow’ and ‘width’
- Stripe size: ‘background-size’
- Stripe color (a little more complicated)
- Bar’s max and min value: ‘aria-valuemax’ and ‘aria-valuemin’ respectively