search

crisbeto / angular-svg-round-progressbar

Angular module that uses SVG to create a circular progressbar
https://crisbeto.github.io/angular-svg-round-progressbar/
MIT License
742 stars 173 forks source link

Multiple color range #95

Closed rockzgarf closed 7 years ago

rockzgarf commented 7 years ago

Hi.. is it possible to add color range e.g. current value 0 - 49% the color is set to red current value 50-99% the color is set to yellow current value 100% the color is set to green

Thanks

crisbeto commented 7 years ago

Yes it is. You can pass a function to the color attribute:

<round-progress max="max" current="current" color="{{ getColor(current) }}"></round-progress>

And then in your controller you can do this:

$scope.getColor = function(current) {
  if (current < 50) {
    return '#f00';  
  } else if (current < 100) {
    return '#ff0';
  } else {
    return '#0f0';
  }
};
tverilytt commented 7 years ago

Hi! @crisbeto Thanks a lot for a real nice progressbar :-)

It would have been real cool to be able to specify different colors (background). E.g. for a countdown scenario I want to use the progressbar, first section is green, then yellow, then red.

Is that doable, and would it require lot of work?!

Cheers -jo