Thursday, December 13, 2012

A CSS3-Only Animated Spinner

There was a time when animated GIFs dominated the web. Now, even using Javascript to animate objects on a page might be coming to an end. The CSS animation style has a lot of power available to create some nice animation sequences. I decided to test it out and make a spinner entirely from CSS.

To make this shorter and easier to read, I'm not adding the vendor-specific prefixes. Since most spinners are a circular shape, we're going to need some circles or parts of circles. By creatively using border-radius, we can turn a square DIV into a circle:


.circle {
width: 60px;
height: 60px;
border-style: solid;
border-radius: 35px;
border-width: 5px;
border-color: #999;
}


The height/width determines the size. The border-radius accounts for a half the width/height but must also include the border. In this case half of 60px is 30px plus the border of 5px to get to the correct value of 35px. Really, as long as its large enough, you'll have a circle - you could just error on the side of really big and use 60px - the browser will figure it out for you.


<div class="circle"></div>


Now, add the class to a DIV to get the following:

css3-rounded-corners-circle

A variation on the circle is to only include one side of the border to create an arc segment. Reusing the above circle definition, we just need to change the border-color style to use transparent borders for all the sides except the top:


.arc-top {
...
border-color: #999 transparent transparent transparent;
...
}



<div class="arc-top"></div>


css3-rounded-corners-arc

Another method to making shapes is to use a 0px height/width DIV and manipulate the borders to create triangles:


.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 35px;
border-color: #999 transparent transparent transparent;
}



<div class="triangle"></div>


This will only show the top border which will look like a triangle:

css-borders-triangle

Taking that concept and applying a border-radius will give the triangle a rounded edge.


.wedge {
width: 0;
height: 0;
border-style: solid;
border-radius: 35px;
border-width: 35px;
border-color: #999 transparent transparent transparent;
}



<div class="wedge"></div>


Which results in a wedge shape:

css3-rounded-corners-border-wedge

With those individual pieces created, I just need to make them move in a spinner like fashion. The animation style has a lot of options. Among them is the name of a keyframes definition which actually defines the path of the animation.


.spinner .wedge {
animation: spinleft 750ms linear 0s infinite normal none;
}

This definition provides a lot of flexibility for designing animation sequences. However, for my purposes, I just needed it to rotate a part of the spinner around in circles:

@keyframes spinleft {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}


Now, just smash together a circle, arc, and wedge:


<div class="spinner">
<div class="circle"></div>
<div class="wedge"></div>
<div class="arc"></div>
</div>


And then apply the animations to infinitely perform the rotations and, without using an image or writing any Javascript, you have yourself a spinner. The full source and demo is on my sandbox. It won't work in IE since it does not support the animation style. However, it provides an interesting glimpse to the power provided in the CSS specification slowly making its way into the browsers.