angular-svg-progressbar

[douglaszaltron]

Design very nice, helpful.
It would be nice if a version without being round, making him straight.

Sorry for the bad english.
Thank you.

[crisbeto]

If you're referring to just making a regular progressbar, there are plenty of other modules out there already. I made this one since I couldn't find any round ones at the time.

[douglaszaltron]

Yes of course! But a single module would be interesting doing these two types of bar because its was very good. I'm trying to modify it, as you have more experience, you could help me with this? @crisbeto

[crisbeto]

I think that goes against the whole idea of making small components that do one thing well and you can throw together into a project as you need them. If we started adding all types of progressbars together into the same module it would become pretty bloated.
If you want some inspiration about how to approach regular progress indicators, Angular Material have some pretty nice ones. You can also take a look at their source which is pretty easy to follow.

[Sankalp256]

Hi Crisbeto
Thanks a lot to you. I struggled a lot on net before I found your plugin for rounded progress bar.It solved my problem.I have one query,I want to have different colors for particular values like if percentage is 0 to 50 % it should be red and after that green.I modified the colors attribute using ? syntax.The color is changing but the problem is when it goes beyond 50 whole color of circle is changed.What I want is below 50, it should stay red and after that it should change.Is it possible because I am not able to do it.Please let me know if this is possible in your plugin.
Thanks in advance.

[crisbeto]

Hmm that's going to be kind of tricky. You could try some of the following:

1. Try playing around with gradients. I've talked more about them in [Feature Request] Partial colors #29
2. This is a bit of a hack, but you could have two progressbars in semcircle mode that come together to form a full circle. Not sure what the outcome of this could be since I've never tried it.

[Sankalp256]

I will try with gradients.With semi-circle I was thinking but then I i was thinking how would I be able to rotate the second semi-circle upside down.With gradients if it works I can apply three colors because that is actually I need to implement.Will try with your other article.Thanks a lot Cris for this progress bar.It really made my work easy and thanks a lot for replying.