CSS3 Loading Spinner

Feb 10 2011
27

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 to height.
  • 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).

View Demo

Subscribe to The Thread

  1. 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.

  2. Kevin

    These techniques are just what I needed for my Phonegap project! Thanks for explaining once again.

    Kev

  3. 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…

    • John

      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).

  4. Very fancy CSS wrangling sir! Cmon browsers, get implementing those transitions and transforms.

  5. 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!

  6. feroc1ty

    nice, you give me inspiration to recreate flicker loading spinner in css :D
    http://jsfiddle.net/feroc1ty/fTzqJ/

  7. GMoulin

    Good use of available CSS3 features.
    Really clean explanation.
    Congrats.

    Can’t wait for Firefox to implement frame animations.

  8. Very cool

    But I can’t shake the feeling that frame animation is destined to become the new <blink>. . . </blink> and <marquee>. . .</marquee>

  9. George Aggelakis

    Doesn’t work with Chrome 9.0.597.94 in Windows XP.

  10. cool!!

  11. WOW.. really nice.. But how can I use it ??

  12. Adamadam

    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.

  13. Alyssa Z

    Not to be a buzzkill, but, how would I connect this to something that is actually loading? Just sayin.

    • Kevin

      For example, the ajax Loading spinner icon? =)

  14. I really was looking for this kind of a preloader. Thanks chris.

  15. Great work! Looking forward to many of these type animations popping up on the web.

  16. Wow! Chris I never imagine using css3 like that. Good work man

This comment thread is closed. If you have important information to share, you can always contact me.