Why does jQuery Mobile 1.1-rc1 use a .gif for the loading icon (again)?

Question

In 1.0.1 the spinner icon was a png that was rotated with CSS. This appeared smooth on Android 2.x for me.

In version 1.1-rc1 they have changed the icon from a .png to an animated .gif

On Android animated .gifs behave oddly for me, with erratic speeds on 2.2.x and 2.3.x and don't work on 2.1.x

Why did they change it from the one to the other? Is there any advantage to not using CSS to rotate the .png which seemed to be a lot crisper and smoother for me.

Does anyone know how to implement the old loader in 1.1-rc1?

Answer 1

JQM may have changed the loading icon because it relied on webkit animations. The animated gif has support for more browsers.

To implement the png loading icon override the .ui-icon-loading class.

.ui-icon-loading {
    background: url(http://code.jquery.com/mobile/1.1.0-rc.1/images/ajax-loader.png);
    background-size: 46px 46px;
    width:46px;
    height:46px;
    -webkit-transform: rotate(360deg);
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}