Ionic loading icon animation overlap with ng-class

ionic-v1
1

I want to animate the loading icon by toggling the icon class using ng-class, ion-loop and ion-looping like this:

 <a ng-class="{\'ion ion-loop\': !refreshing, \'ion ion-looping\': refreshing}" href="" ng-click="pageRefresh()"></a>

The animation looks good on my Mac Chrome, but after deployed to my Android 4.3 Galaxy s4, this is how it looks like when animating, so ion-loop still visible during the rotate animation

2

For some reason your image is returning 404, but I solved that issue using ternary operator like this

ng-class="showSpinner ? 'ion-loading-d' : 'ion-loop'"

But now I have issue that my ion-loop icon is spinning, the same happens if I use any other icon, I guess, ionic adds some classes for animation and they stay defined even when the class is removed. this happens only on 4.1.2 android, 4.4 works fine…

can you try to change your ng-class as mine and see if you experience the same issue?

thanks