Apply CSS to Progress Bars inside a Data Repeater

Unknown

Apply CSS to Progress Bars inside a Data Repeater

Unknown

I have a dashboard consisting of a data repeater with progress bars in it. Can you please guide me how to add colors to the progress bars? See image below. Here Im using two data repeaters. I want the progress bar of Top 10% to be green and the progress bar of Bottom 20% to be red.

[img]att1[/img]

Unknown

[color=rgb(34, 34, 34)][font=Arial, Helvetica, sans-serif]I have attached a sample project and CSS document that should help set this up. You should not[/font][/color][color=rgb(34, 34, 34)][font=Arial, Helvetica, sans-serif] need to add the CSS Document manually as its already a part of the importable project. [/font][/color]
[color=#222222]
[/color]
[color=#222222]See the CSS below: [/color]
[color=#222222]

.ScrollView-one .ui-progressbar-value{
background: green;
}
.ScrollView-two .ui-progressbar-value{
background: red;
}
[/color]
[color=rgb(34, 34, 34)][font=Arial, Helvetica, sans-serif]
[/font][/color]