The progress bar sometimes loads broken

[slaweet]

I'm using your progress bar in my app and usually it looks great:

But sometimes when I was in another tab while the page was loading it looks like this:

[slaweet]

Here is the svg of one of the broken progress bars

<svg class="round-progress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 214 214" style="top: 0px; left: 0px; position: static; width: 214px; height: 214px; overflow: hidden;">
<circle fill="none" cx="107" cy="107" r="99.5" style="stroke: rgba(190, 190, 190, 0.498039); stroke-width: 15px;"></circle>
<path fill="none" transform="" d="M 27.35546244871462 166.64057040506816 A 99.5 99.5 0 0 0 107 7.5" style="stroke: rgb(255, 238, 51); stroke-width: 15px; stroke-linecap: round;"></path>
<g ng-transclude=""></g>
</svg>

[crisbeto]

That looks weird. I think I've had something like that happen in cases where unexpected values get passed as the current or max. What version are you using and also how can I reproduce this?

[slaweet]

You can reproduce it by the above mentioned "when I was in another tab while the page was loading" on this page: https://anatom.cz/overview/slaweet I'm using version 0.3.2.

[crisbeto]

I see what you mean, although it took a while to reproduce. It looks like it may be a browser issue.

[slaweet]

I tried to upgrade to 0.4.6, it didn't seem to help. But then I tried to use responsive="true" instead of computing the radius myself and using radius="{{progressRadius}}" and it looks like it fixed the problem.