I made a little CSS3 rotate-y loading graphic thing just for kicks. Here’s an animated GIF of the glory as it appears in WebKit.
Theories at work:
- Two circles on top of each other. One created by a pseudo element.
- Pseudo circle sits underneath with negative z-index.
- Pseudo circle has inset box-shadow.
- Regular circle has regular box-shadow.
- “Loading…” is a strong tag with hidden overflow.
- Width of strong tag is animated keyframe, doing the reveal, infinitely.
- Text is vertically centered by having
line-height
equal toheight
. - Spinner is a triangle placed above the pseudo circle but below the regular circle with z-index.
- Triangle is rotated from it’s tip by changing it’s
-webkit-transform-origin
- Triangle is keyframe animated to go from 0 to 360deg infinitely.
Ideally, the triangle would be a pseudo element as well, but unfortunately it’s a <span>
. Pseudo elements cannot be animated (yet). Firefox 4 can transition them, but Firefox 4 doesn’t do keyframe animations (yet).
That’s brilliant as usual. All we need now is all the other browsers to catch up and play fair.
Keep up the great work Chris.
These techniques are just what I needed for my Phonegap project! Thanks for explaining once again.
Kev
As usual, great work. It doesn’t look that good to me though…
Google Chrome 9.0.597.84 – Windows XP: http://nahueljose.com.ar/css3-loading.jpg
And for me with Chrome 9 on Windows 7 too…
Same. Chrome 9 Windows 7 there’s something up.
Works nicely in Safari for Win (XP). Looks like a Chrome issue that has been fixed (see comment downthread).
Odd, it looks great on Mac Google Chrome
http://codecrunchers.net/chrome-mac.png
This is a known bug,
http://code.google.com/p/chromium/issues/detail?id=25334
http://stackoverflow.com/questions/3358560/google-chrome-inset-box-shadow-bug-on-windows-not-on-mac-better-workaround
it’s fixed http://paulirish.com/2011/chrome-inset-box-shadow-bug-fixed/
Very fancy CSS wrangling sir! Cmon browsers, get implementing those transitions and transforms.
Fancy Stuff!
…but what’s even fancier is your gift of being able to explain things on a level that ANY web designer can understand.
Thanks!
nice, you give me inspiration to recreate flicker loading spinner in css :D
http://jsfiddle.net/feroc1ty/fTzqJ/
Nice work with the flicker spinner. That gives me logo and other ideas.
Good use of available CSS3 features.
Really clean explanation.
Congrats.
Can’t wait for Firefox to implement frame animations.
Very cool
But I can’t shake the feeling that frame animation is destined to become the new <blink>. . . </blink> and <marquee>. . .</marquee>
Doesn’t work with Chrome 9.0.597.94 in Windows XP.
cool!!
WOW.. really nice.. But how can I use it ??
Or you could just use a smooth flash animated element that can be created in 2 minutes and be abuout 1.5KB in filesize. It would work in *every* browser!
Hey if that’s what you like to do and it does a great job for you, high friggin five dude. I’m all about solid production ready stuff. But I’m also about learning new stuff and pushing the web forward. We’ve been doing that for a while now and it’s working out awesomely.
Don’t worry there will be tools for doing CSS3 animations when all major browsers start supporting it (we are almost there).
For example now there are tools for creating CSS3 gradients:
http://www.colorzilla.com/gradient-editor/
@Adam: if our society weren’t “hungry” for technological improvements, we’d still be writing on paper rather than typing on a keyboard.
so it is very useful to keep advancing technology and push CSS3 farther and farther into reality until it becomes the norm, when CSS4 will come out.
Not to be a buzzkill, but, how would I connect this to something that is actually loading? Just sayin.
For example, the ajax Loading spinner icon? =)
I really was looking for this kind of a preloader. Thanks chris.
Great work! Looking forward to many of these type animations popping up on the web.
Wow! Chris I never imagine using css3 like that. Good work man
It works only on white background. Not a good solution
Oh! I love the result! Thanks for sharing :)