Grow your CSS skills. Land your dream job.

CSS3 Loading Spinner

Published by Chris Coyier

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

Comments

  1. Permalink to comment#

    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
    Permalink to comment#

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

    Kev

  3. Permalink to comment#

    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

  4. Kevin
    Permalink to comment#

    Odd, it looks great on Mac Google Chrome

    http://codecrunchers.net/chrome-mac.png

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

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

  7. feroc1ty
    Permalink to comment#

    nice, you give me inspiration to recreate flicker loading spinner in css :D

    http://jsfiddle.net/feroc1ty/fTzqJ/

  8. GMoulin
    Permalink to comment#

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

    Can’t wait for Firefox to implement frame animations.

  9. Permalink to comment#

    Very cool

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

  10. George Aggelakis
    Permalink to comment#

    Doesn’t work with Chrome 9.0.597.94 in Windows XP.

  11. Permalink to comment#

    cool!!

  12. Permalink to comment#

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

  13. Adamadam
    Permalink to comment#

    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/

    • Permalink to comment#

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

  14. Alyssa Z
    Permalink to comment#

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

  15. Permalink to comment#

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

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

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

  18. Alexander
    Permalink to comment#

    It works only on white background. Not a good solution

  19. Allen
    Permalink to comment#

    Oh! I love the result! Thanks for sharing :)

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

*May or may not contain any actual "CSS" or "Tricks".