Setting the current to max and decrementing values to 0

[Marko Grbic]

Hey, I'm trying to set my progress bar to start from the max value and go down to 0.
For example, in the demo, when current value is set to 20, max to 20 and it's set to go clockwise, you can decrement the value and it will go from max to 0 in the right direction.

This is the code I'm using but it doesn't seem to set the current to max (max==current==20), and always starts from 0.

<round-progress [current]="20" [max]="20" [duration]="20*1000" [animation]="'linearEase'" [clockwise]="true"></round-progress>

Is there any way this could be done? Thanks.

[Kristiyan Kostadinov]

That seems correct. Is this the complete code or is there anything else around it?

[Marko Grbic]

That's the complete code. But what I'm getting with it is the progress bar starting at 0, going from 0 to 20 in 20 seconds, and then stopping there. What I'm trying to do is the progress bar starting at 20 (no animation just immediately start at 20) and going to 0 in 20 seconds (decrementing each second of course).

That is essentially my question, sorry if I wasn't clear before.

[Kristiyan Kostadinov]

I see. What you could do is initialize the progress circle without an animation like this:

<round-progress [current]="20" [max]="20" [duration]="0" [animation]="'linearEase'" [clockwise]="true"></round-progress>

And then a little bit later you can set the current to 0 which will kick off the animation.

[Marko Grbic]

Setting the duration to 0 doesn't fill out the progress bar because the animation never starts. Setting it to 1 makes it go to current immediately.

Thanks for your help, I've managed to make it work like so:

<round-progress [current]="current" [max]="20" [duration]="duration" [animation]="'linearEase'" [clockwise]="true"></round-progress>

Where current is initially set to 20 for example, and duration is 1. After a trigger event, duration is set to 20*1000 and current to 0, which makes it go from max to 0 in 20 seconds.