I would like to change the color of a progress bar by range. for example, from 0% to 30% the color is green, from 31% to 75% the color of the progress bar changes to yellow and then from 76% to 100% the color has to be red.
What properti would work for this?
If you want to be really cool then add some CSS transition settings. (The animated GIF below doesn’t quite do it justice.)
Figure 1. The transition effect.
Figure 2. The settings.
transform 0.5s linear gives the smooth, slightly delayed motion. background-color 2s ease gives the fade from one color to another.
Adjust the timings to suit.
These are CSS properties and there are many tutorials on the web. You can start at W3Schools.
Yes, you can have either a tag binding or a property binding. Selecting one disables the other.
As you have probably discovered, you needed to apply the map transform to the tag binding.