I polished the technique a bit more to solve previous issues:
http://dl.dropbox.com/u/30377416/design/loading-indicator/loading-gradient.html

To better detect browser capabilities, I used a transparent gradient as a secondary background image. That makes old Webkit browsers (which solves problem with Android 2.x) and IE9 (capable of multi-background but not animations) to use the Gif Fallback.

background: transparent url(images/loading.gif) center center no-repeat;
background-image: linear-gradient(transparent, transparent), url(images/loading-static.svg);

In addition, I used CSS animations since the SVG animation was problematic on Safari.

In theory (based on browser version support for gradients and svg), it should work across all browsers (some SVG-capable old browsers may still use the fallback but it guarantees that SVG is not used by browsers not able to render it).

Pau


On Fri, Nov 23, 2012 at 8:06 PM, Siebrand Mazeland (WMF) <smazeland@wikimedia.org> wrote:
Nope. No HQ image on zoom.

--
Siebrand Mazeland

M: +31 6 50 69 1239
Skype: siebrand

Op 23 nov. 2012 om 20:00 heeft Pau Giner <pginer@wikimedia.org> het volgende geschreven:

> Thanks for the feedback siebrand.
>
> I could reproduce it in Safari and fix it. Does it work now in the iPad?

_______________________________________________
Design mailing list
Design@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design



--
Pau Giner
Interaction Designer
Wikimedia Foundation