Thanks to all for your comments.

I applied Krinkle and Bartosz comments and defined the ruless using LessCSS to be included in the Agora repo. I submitted a pull request to continue there the development.
An example can be viewed here (it may be a bit slow since Less is not pre-compiled but applied live for the example): http://dl.dropbox.com/u/30377416/design/agora/examples/loading-indicator/loading-indicator.html 

S, these little moving elements are better evaluated in context (when peripheral vision is used) than staring directly at them. When we apply this in context we'll probably need to adjust the rotation speed to play well with the animation capabilities of browsers.


Pau



On Tue, Nov 27, 2012 at 11:01 PM, Krinkle <krinklemail@gmail.com> wrote:
On Nov 27, 2012, at 8:19 AM, Bartosz Dziewoński <matma.rex@gmail.com> wrote:

-- Matma Rex


2012/11/26 Pau Giner <pginer@wikimedia.org>:
I polished the technique a bit more to solve previous issues:
http://dl.dropbox.com/u/30377416/design/loading-indicator/loading-gradient.html

Pau, you are missing an unprefixed @keyframes rule, without which this
won't work on Opera:

@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

After it's added, it works nicely.


Also the ms prefix seems bogus, afaik IE <= 9 doesn't support it at all. And IE10 supports unprefixed.

http://caniuse.com/#feat=css-animation

I'd drop -ms and -moz, keep -webkit and add unprefixed.

-- Krinkle



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




--
Pau Giner
Interaction Designer
Wikimedia Foundation