Animation iteration event
In the past I have used CSS Animations to roll my own loading spinners. I prefer using CSS animations as I can get a smoother frame rate, without the need for any clunky gif assets.
One thing that has always bothered me about this is that once the loading has finished and we remove the
spin class, the animation would abruptly jump back to its starting position (
A helpful event
animationiteration event will fire every time a currently animating element completes an iteration.
Solving the problem
We can use this event to remove our
spin class at exactly the right time so that our animation doesn't jump back to the start when loading has finished.
animationiteration event is well supported in modern browsers using the following prefixes.