animation is not showing on switching tabs

[saqueib]

its great progress bar, but I am facing an issue with tab interface, its seems animation is not showing on switching tabs.

It only show on hard refresh, I think animation should only fire when the tab content is visible.

I am using simple this in official tab component found here https://angularjs.org/#create-components

Please let me know is there any way I can show animation on tab switch, every tab has its own directive.

<div
max="total"
current="percent"
color="#e84d51"
bgcolor="#623a45"
radius="100"
responsive="true"
animation-delay="500"
stroke="1"
round-progress
></div>

I think if you can add and attribute replay="true" or something it will be nice to control the animation

[crisbeto]

Yeah the animation won't restart since the tab directive only toggles display: none/block. I don't think that checking whether the progressbar is being displayed and restarting the animation makes sense to have in the component since the use case might be different for different people, in addition to probably being kinda slow. I'll close the issue but we can still continue commenting on a solution.

You should be able to work around this by setting the current to 0 for the progressbars that are inside inactive tabs and setting it to the proper value when the tab becomes active.

[saqueib]

@crisbeto Thats what I thought, I am going with changing current value on tab switch.