ProgressIndicator Customisation

Hi,

I want to create a new component based on
ProgressIndicator
component.
This one should have the color
RED
for values under 0.5 and
GREEN
for values above.

I tried to use widgets but i didn’t knew how to change styles dynamically.

Can someone help me.

Here’s a simple example

Define two styles.

.red .v-progressindicator-indicator {
	background: #f00 none;
}

.green .v-progressindicator-indicator {
	background: #0f0 none;
}

Initially set

ProgressIndicator p = new ProgressIndicator();
p.addStyleName("red");

and when you update the value over 0.5

p.removeStyleName("red");
p.addStyleName("green");