Kilian Valkhof

CSS3 loading spinners without images

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!