Ionic loading icon animation overlap with ng-class


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


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?