search

bootsoon / ng-circle-progress

A simple circle progress component created for Angular based on SVG Graphics.
https://bootsoon.github.io/ng-circle-progress/
MIT License
250 stars 85 forks source link

Smooth color transition #129

Open samjviana opened 4 years ago

samjviana commented 4 years ago

That's more an sugestion than an issue since i managed to workaround the problem. So, the thing is that when you use various colors for the progress bar, the color changes kinda suddenly. To fix that i added an CSS class to the path element inside the circular-progress component with the property transition: stroke 1s ease. All things said, i think it would be an good idea to add this to the module itself. Best regards.

bootsoon commented 4 years ago

Could you give me an example including the CSS code?

samjviana commented 4 years ago

Working on it...

samjviana commented 4 years ago

So, you can see example here: https://codesandbox.io/s/beautiful-tdd-kt2f7?file=/src/app/app.component.html The files you would like to see is app.component.html, app.component.ts and styles.css. The circular-progress bar will keep changing values where the closest the value is to 0 the color should be green and closer to 100 it should be red. The gauge on the left has the class smooth that is defined on styles.css, that class adds the attribute transition: stroke 1s ease;. And the gauge on the right doesn't have this class. It's a slightly diffrence but i think it's nice,

The interval logic that i used start to get buggy on this online editor, but refreshing the page seems to solve the problem