How to change ProgressBar color

[RyanKwan]

Hi,

May I know is it possible to dynamic change the progress bar color? e.g. show the progress bar color as green if the progress is below 70%, show yellow if it's above 70%, and show red if it reaches 100%.
I tried to play with the style attribute, but seems it just affect the outer <div> which failed to modify the color in the inner div which is the actual progress bar style.

[mert.sincan]

Please try;

Code: Select all

//CSS
.greenBar.ui-progressbar .ui-progressbar-value {
   background: green;
}

.yellowBar.ui-progressbar .ui-progressbar-value {
   background: yellow;
}

.redBar.ui-progressbar .ui-progressbar-value {
   background: red;
}

//js
render() {
        let progressBarClass = classNames({
            'greenBar': this.state.value < 70,
            'yellowBar': this.state.value >= 70 && this.state.value !== 100,
            'redBar': this.state.value === 100
        });
        
        return (
            <div>
               ...
               <ProgressBar value={this.state.value} className={progressBarClass}></ProgressBar>
               ...
            </div>
        );