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<https://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/lo…
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(a)gmail.com> wrote:
On Nov 27, 2012, at 8:19 AM, Bartosz Dziewoński
<matma.rex(a)gmail.com>
wrote:
-- Matma Rex
2012/11/26 Pau Giner <pginer(a)wikimedia.org>rg>:
I polished the technique a bit more to solve previous issues:
http://dl.dropbox.com/u/30377416/design/loading-indicator/loading-gradient.…
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(a)lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
--
Pau Giner
Interaction Designer
Wikimedia Foundation