CSS3 is now being used widely to simplify task and to give quick better results. Today we are going to see how to create a rotating image or loading icon with CSS3 transform rotate property.

The first thing we are going to do is to create some loading image in photoshop. I just created one for this demo.

Now we are going to rotate this image with CSS3 properties.

Just create a simple html page and add following code to it.

<img id=”loading” src=”css3-loading-rotating-circle.png” />

It will create our image with id as loading. Now we will apply CSS3 properties to it.

Currently CSS3 is not supported in all browsers. So for using these properties in Mozilla Browser we need to add “-moz-” prefix to the property and for using these properties in Webkit Browser we need to add “-webkit-” prefix to the property.

Now create a style tag in your document and add following styles to it.

#loading
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
}
@keyframes myfirst
{
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}

@-moz-keyframes myfirst /* Firefox */
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(360deg);}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}

Save your page and check it in Firefox, Safari or Google Chrome. If your browser doesn’t support CSS3 or if you are not able see it in action then check following video.

CSS3 Rotating Image, CSS3 image rotation with CSS3 Transform Property

In the above code

animation-name

Property specifies the name of the function we are going to execute.
and with

@keyframes myfirst

function we are specifying to rotate that circle from 0 deg to 360 deg.

With

animation-duration

property we are specifying the time duration in which animation should be completed. If you want to rotate circle fast then reduce this timing from 5 seconds (5s) to 2 seconds (2s).

And with

animation-iteration-count

property we are making it to rotate continuously.

TRY A DEMO of CSS3 Loading Rotating Image Icon