Kilian Valkhof

Front-end & user experience developer, Jedi.

CSS3 loading spinners without images

CSS & HTML, 3 March 2010

While playing around with css-transform to make various shapes, I saw a way to create animated image-less loading spinners such as used in a lot of webapps and of course on the iPhone.

CSS transforms

CSS transform (in Firefox 3.5+ and Webkit-based browsers) has a whole bunch of interesting functions, such as rotation, translation, scaling and skewing. To learn more about the different functions, check out the Mozilla developer center overview of CSS transform. After playing around with chaining different transforms and seeing the effect, I found out something interesting:

transform:rotate(45deg) translate(0, -35px);

If you rotate first, and then translate (move), it will move along the rotated axis. The above code translates a block to the top-right corner (45 degrees). (the gray div is not transformed while the black one is.)

Using this, I could rotate and translate a bunch of divs to create loading spinners (though this one doesn’t spin yet!):

In this example, each div is rotated an additional 45 degrees. The first one is not rotated, the second one is rotated 45 degrees, the one after that 90 degrees, and so forth. Additionally, each div has increased opacity to make it look like most loading spinners.

Animation

Webkit supports CSS animations, but these are continuous while most loading spinners are not. On the left side is a spinner animated with CSS animation (only works in Safari and Chrome), on the right there’s one animated with a small bit of JavaScript to look like regular loading spinners:

The code for the CSS animation is fairly straightforward:

#div2 {
  -webkit-animation-name: rotateThis;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
}
@-webkit-keyframes rotateThis {
  from {-webkit-transform:scale(0.5) rotate(0deg);}
  to {-webkit-transform:scale(0.5) rotate(360deg);}
} 

While the (quick and dirty) code for the JavaScript animation is pretty easy as well:

  var count = 0;
  function rotate() {
    var elem2 = document.getElementById('div3');
    elem2.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem2.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    if (count==360) { count = 0 }
    count+=45;
    window.setTimeout(rotate, 100);
  }
  window.setTimeout(rotate, 100);

Someone else might be able to duplicate the loading spinner-style rotation with CSS animations (please let me know!), but the JavaScript solution looks better and works in Firefox too.

Going crazy with it (More examples!)

Once I had the basic ‘functionality’ working, I just decided to go crazy with it and create a whole bunch of different style loading spinners. You can find them on this page: CSS3 loading spinner examples.

Check out the source for the way to style the different spinners and let me know when you make interesting variations!

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. […] I decided to look again into how I could do it without the image. A quick search led to a post by Kilian Valkhof who had a good idea for the basic technique. The first step is to create the bars of the animation […]

  2. MattK

    Well, I have a use case! WebKit on Android <2.2 doesn't support animated gifs, so this looks like the best solution.

  3. […] CSS3 animation, but I’d rather keep it consistent between browsers. The technique comes from Kilian Valkhof with initial integration into VideoJS by Janez Troha […]

  4. Awesome. Worked perfectly for me! This will look great for the slow loading js stuff on some of my sites.

  5. […] CSS3 Loading Spinners without Images […]

  6. Very nice effect you did there, maybe in the future I will use this…

    A nice and respectful suggestion: do not put the first letter of the comment so big or so down in comparison with the first line, it just doesn’t look good; maybe you can upload it a bit.

    Anyway, thank you very much!

  7. […] http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ Tags: animation, css, CSS3 Transitions, css3 webkit, webkit Category: Web Design   »   Comment →   »   Trackback […]

  8. nice. really liked the last one. i think you might also be interested in http://cssload.net – it’s a generator of these things

  9. Yeah cool one. I prefer GIF and APNG though. CSS3 animations are not yet supported by all browsers.

  10. […] using pure CSS3 for mobile apps, there already were some nice CSS3 indicators over the web – CSS3 Loading Spinners Without Images by Kilian Valkhof and Loading spinner animation using CSS and WebKit by Jason Z.. But we wanted to make something of […]

  11. CSS3 is the future, I just wish it was the present. So many people are slow to embrace this amazing technology, I just wish I could speed up the clock somehow!

  12. Mark

    Unfortunately, CSS3 animations seem to be quite CPU hungry at the moment. A simple spinning image made Firefox go up to almost 50% CPU usage!

    In Chrome, the animation on this page spikes around 30%!

    Looks like this method needs a bit of optimizing before I would recommend it.

  13. […]   源码 + 演示 […]

  14. […] I decided to look again into how I could do it without the image. A quick search led to a post by Kilian Valkhof who had a good idea for the basic technique. The first step is to create the bars of the animation […]

  15. […] 源码 + 演示 […]

  16. Thank you for the easy and clean explanation, maybe it’s pretty CPU hungry as some say but has given me some ideas for my new project.

  17. […] Demo – Tutorial […]

  18. […] Demo – Tutorial […]

  19. […] Source + Demo […]

  20. JohnK

    There’s a new steps() command in CSS, you should now be able to do this without javascript. (Cf. http://lea.verou.me/2011/09/pure-css3-typing-animation-with-steps/)

  21. […] Source | Demo […]

  22. […] CSS3 Loading Spinners without Images […]

  23. […] 源码 + 演示 […]

  24. […] 源码下载    在线演示 […]

  25. […] 源码 + 演示 […]

  26. sweta

    not working in IE

  27. […] 源码 + 演示 […]

  28. […] Demo – Tutorial […]