search

tigrr / circle-progress

Responsive, accessible, animated, stylable with CSS circular progress bar available as plain (vanilla) JS and jQuery plugin.
https://tigrr.github.io/circle-progress
MIT License
164 stars 43 forks source link

Change progress color based on value #15

Closed christiancazzaro closed 1 year ago

christiancazzaro commented 2 years ago

Hi, is there a way to change the progress bar color based on value?

Example:

value > 80 = green value >60 = yellow value < 60 = red

Or even better, is it possible for the progress bar to adapt dynamically to the color given a specific range of colors? Example: colors from green to red on a scale from 0 to 10, where 10 is green and 0 is red

Thank you

tigrr commented 2 years ago

Hi,

Of course it is possible. You can control all the presentational properties by standard CSS means.

See an example implementation: https://codepen.io/tiggr/pen/VwwZoOR

christiancazzaro commented 2 years ago

Thank you! I tried to edit it but I am not familiar with HSL calculation and I can't figure out how to do it. I leave you my code below. I need the circle-progress-value to be red at 0 and green at 100. Colors in between 0 and 100 should adjust automatically with increasing value. If you can do it with HEX colors it would be better. I hope you can help 🙏🏻

HTML

<div class="card">
    <div class="card-body">

    </div>
 </div>

CSS <style> .circle-progress-value { stroke-width: 6px; stroke: hsl(39, 100%, 50%); } .circle-progress-circle { stroke-width: 6px; stroke: hsl(39, 100%, 85%); } .circle-progress-text { font-family: Cerebri Sans, Helvetica; font-weight:bold; fill: #000; font-size:2rem; } </style>

JS

tigrr commented 1 year ago

You can update the stroke color on the .circle-progress-value. It will be easier with HSL notation. You can calculate the values from, say, hsl(0 100% 50%) (red) to hsl(120 100% 50%) (green). Please refer to the specification for more details on HSL.