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 requesthttps://github.com/wikimedia/agora/pull/7 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/loa...
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.h...
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