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

The progress bar sometimes loads broken #102

Open slaweet opened 7 years ago

slaweet commented 7 years ago

I'm using your progress bar in my app and usually it looks great: screenshot from 2016-12-03 23 15 04

But sometimes when I was in another tab while the page was loading it looks like this: screenshot from 2016-12-03 23 14 36

slaweet commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

slaweet commented 7 years ago

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.