It is based on:

An animated SVG
Use of an animated gif fallback based on multiple backgrounds support (similar to what is described here).

The CSS code is the following:

.loading{
background: transparent url(images/loading.gif) center center no-repeat;
background: none, transparent url(images/loading.svg) center center no-repeat;
background-size: 100% 100%;
height: 34px;
width: 34px;
}

The solution does not involve Javascript or complex (or vendor-specific) CSS. The "none," forces the use of multiple backgrounds so that to the SVG background is processed only by modern browsers, while the GIF one is shown for browsers not supporting multi-backgrounds such as old IE versions. As Brion commented, I think there is no need for more types of fallback.

It does not work for Android 2.1 -2.3 default browser since it supports multiple backgrounds but not SVG, so it tries to display the 2nd background but no image is displayed.
It is sub-optimal for some old browser versions which may support SVG but du not display it since they lack multi-background support (such as FF 2 - 3.5). This is not a big problem since they will see the gif version.

Apart from the above I found no more issues with this approach. If there are no major complaints I'll be submitting this to the Agora repo as an initial implementation for the loading indicator. Later it can be taken as a reference to add Android-specific fixes.

On Fri, Nov 16, 2012 at 9:50 PM, Brion Vibber <bvibber@wikimedia.org> wrote:

On Thu, Nov 15, 2012 at 11:57 PM, Daniel Friesen <daniel@nadir-seen-fire.com> wrote:

On 12-11-15 8:02 AM, Pau Giner wrote:

The implementation I created was a quick hack to show the animation. As you commented, the ideal solution should be friendly with high resolution displays, support old browsers, and not be js intensive.
According to what I saw on bug 32101 it seems that there is still no consensus on how to better achieve the above requirements.

A loader should generally only ever happen on a page where JS is enabled so deciding how to handle this situation is much easier.
This stuff is made up of simple shapes so vector graphics are the cleanest way to implement this. And since we're in JS we can easily test capabilities and switch to VML when in an SVG-less IE.
And best performance is naturally done through using the best available css.

I wouldn't bother with VML; old IE can get an animated GIF and nobody'll know the difference. :)

I revised my experiment based on that with better sizes, colours, and arcs instead of layered circles.
[snip]

For some reason this doesn't animate correctly in Safari or Chrome when I zoom in; the origin of the rotation moves away from the center.

-- brion

Pau Giner

Interaction Designer

Wikimedia Foundation