Progress Circle with customized color display

0
Dear Experts ,  I have a requirement to display a value (KPI) in a progress bar . If the value range is between  0-50 color of progress circle should be in RED , If the value range is between  50-60 color of progress circle should be in orange If the value range is between  60 and above  color of progress circle should be in GREEN, I have seen Progress Circle has option for only positive and negative values but nor for dynamic color setting , please suggest me how can I achieve this ?  Thanks in advance  
asked
2 answers
1

Hi Tejaswi,
for customize progress circle you work on something like this Progress Ring 
https://css-tricks.com/building-progress-ring-quickly/
hope it helps !!

answered
0

https://progresscircle.mxapps.io/p/Playground has no parameter for changing colors. Even the demo under Behavior=>Different colors only shows grey.

Since you will probably need to change it client-side: here is an example in front-end coding: https://codepen.io/cssgrid/pen/GMNgEa

Alternative to a progress bar you can use a Gauge meter.

answered