Spin an image horizontally with CSS3

Usually we use gifs to show that something is loading, like an AJAX request for example. We can find a lot of loading gif generators on the Internet (eg: Ajaxload, Preloaders, etc). We could group all these gifs into three groups: clockwise rotation, progress bar, animated images. But what if we need something else? CSS3 is a powerful tool to create different and lightweight animations.

One day I wanted to show a loading image but i didn’t want to use a boring loading gif. I think we have in our hands the possibility to create beautiful interfaces and we have a lot of ways to do it. One of these ways is CSS3 and its awesome features in animation. In this case, I want to talk about keyframes.

The main idea is the following: use the software logo to show when an AJAX request was loading. Instead of embed a new loading gif somewhere in the page, we are going to use the software logo itself. At the first place I thought in a simple clockwise rotation. That is a risky solution because in some situations it’s funny to see the logo rotating but this doesn’t mean to be good. When we are working for important clients we usually don’t want to do funny things. But remember: professional doesn’t mean ugly. So, what are our choices? We could use a horizontal spinning solution. The final effect can’t be considered funny, everyone will understand something is happening in that moment but it’s still a nice effect.

At first, we need and image:

<img id="image-loading" src="/example.png" alt="" />

As I said before, we are going to use keyframes. Now lets define some CSS classes:

@keyframes spin-horizontal {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}
.image-rotate-horizontal{
    -moz-animation: spin-horizontal .8s infinite linear;
    -o-animation: spin-horizontal .8s infinite linear;    
    -webkit-animation: spin-horizontal .8s infinite linear;
    animation: spin-horizontal .8s infinite linear;
}

What we are doing with keyframes is to define an animation specifying two positions: the initial and the final one. CSS3 magic will create the complete animation itself. In this case, we are saying that the animation called spin-horizontal starts with a rotation in the Y axis of 0 degrees, and finishes with 360 degrees. However this isn’t enough because we need to define some temporal variables too. With the class image-rotate-horizontal we specify that the element with that class has to be rotating looping the animation each 0.8 seconds infinitely in a linear way. The animation CSS attribute give us a lot of options to configure our animations.

Finally, you just have to add the class image-rotate-horizontal using jQuery or similar. For example:

$("#image-loading").addClass("image-rotate-horizontal");

To see a working example, you can check this jsFiddle. I recommend to have a look the CSS documentation to learn more of these attributes and its awesome possibilities.

Good coding!

3 Comments


  1. I’d like to make use of this but without the load & stop button, just start spinning on page load, can that be done in this framework?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *