Creating “Loading” Animations Using Only CSS3

Syed Fazle Rahman
A programmer, a designer and a non-traditional Engineer..

If you have spent any significant time on the web, you will almost certainly have seen small animations that indicate a page, image or other web element is loading or being processed. You can easily come across these in many situations such as PayPal transactions, Facebook navigations, logins, form submissions and many more web contexts.

These animations not only look good but also give a feeling of complex processing at the backend. More than anything, these animations tell the user that the “wheels are in motion”, that their request is being processed. Without them, users are often left in the dark wondering whether anything is really happening.

Most of the time, the images used are GIF files that run continuously until another event occurs. Generally, creating loading graphic images requires a good knowledge of photo editing software such as Photoshop, CorelDraw or similar, which can involve complex procedures and tweaks. GIF images can also be heavy in size and take time to load at the front end.

examples of loading animations
Examples of Loading GIFs

The best alternative to such heavy graphics images is using CSS3 methodologies to replace them. Using only basic HTML elements like span and CSS3 properties like 3D transform you can create beautiful and extremely light animations.

One of the main advantages of using CSS techniques over GIF images is that they don’t take so much time to load. They are much faster and are available whenever we need them.

NOTE: If you are unfamiliar with the transform properties of CSS3 then I strongly recommend you to read “Advanced CSS3 2D and 3D Transform Techniques” in which I cover the subject.

In this post, I am going to show you how to create beautiful loading animations using only CSS3 and HTML.

Let us first start by designing the structure of loading animation using HTML.

Structure Using HTML

We will create a container div classed loadingdiv and then insert five span elements. Follow the example below:

<div class="loadingdiv">

            <span></span>

            <span></span>

            <span></span>

            <span></span>

            <span></span>

</div>

The loading animation which I will be creating will consist of five circles as in the figure below:

five colored circles

Each span in the above HTML will be designed in the form of circles, each having different colors but sharing the same CSS properties, which we will see soon.

The Basic CSS

.loadingdiv span{

   display: inline-block;

    vertical-align: middle;

    width: 10px;

    height: 10px;

    margin: 50px auto;

    background: #174C4F;

    border-radius: 5px;

    -webkit-animation: loading 0.9s infinite alternate;

    -moz-animation: loading 0.9s infinite alternate;

    box-shadow:1px 1px 1px #444444;

}

We have set the span’s display property to inline-block so that each circle floats right next to the previous span.

Now, you might be thinking, “Why didn’t he just float:left?”

The main reason is that when we change the individual heights of each span in a continuous manner they will get dis-ordered and make the animation look wrong. Using inline-block will prevent the span elements getting positioned on top of each other when the height of the previous span gets reduced.

We have also set the vertical-align property to middle so that the circle stays in the middle of the vertical line when its shape changes. This will be clearer when we finish applying CSS3 transform to the above spans.

We have also bound the loading named animation to the span element. We will soon define the loading animation using keyframes. To be on the safe side, we have used vendor defined animation which is expected to work on almost every modern browser.

Now, if you open the browser and check the webpage, you will five static circles that have the same colors.

Our next aim is to change the colors of each circle.

Let’s see how to do it:

.loadingdiv span:nth-of-type(2) {

    background: #207178;

    -webkit-animation-delay: 0.2s;

    -moz-animation-delay: 0.2s;

}

.loadingdiv span:nth-of-type(3) {

    background: #FF9666;

    -webkit-animation-delay: 0.4s;

    -moz-animation-delay: 0.4s;

}

.loadingdiv span:nth-of-type(4) {

    background: #FFE184;

    -webkit-animation-delay: 0.6s;

    -moz-animation-delay: 0.6s;

}

.loadingdiv span:nth-of-type(5) {

    background: #F5E9BE;

    -webkit-animation-delay: 0.8s;

    -moz-animation-delay: 0.8s;

}

We have used the nth-of-type pseudo class to set the colors of each adjacent circle. You can see I have also provided a delay of 0.2s in the animation property for each span. This allows the spans to take action after 0.2s from the time of the previous span’s effect. This way the span will show animation in continuous manner.

Now let’s define the animation using CSS3 Transforms and Keyframes. Here we go!

@-webkit-keyframes loading {

  0% {

    width: 10px;

    height: 10px;

    -webkit-transform: translateZ(0);

  }

  100% {

    width: 24px;

    height: 24px;

    -webkit-transform: translateZ(-21px);

  }

}

@-moz-keyframes loading {

  0% {

    width: 10px;

    height: 10px;

    -moz-transform: translateZ(0);

  }

  100% {

    width: 24px;

    height: 24px;

    -moz-transform: translateZ(-21px);

  }

}

As you can, see we have again given preference to the vendor-specific keyframe definitions. You have to define the property of each span at 0% of the time and at 100% of the time i.e., at the completion.

We have set the width and height of the circle to 10px at 0% and to 24px at 100%. This way each circle grows repeatedly one after another.

To make them look more stylish we have used translateZ which is set to 0px at 0% and -21px at 100%. This will give the circle an elevated effect, moving out of the screen.

a variation

Here is the demo link.

Now let’s experiment a bit!

1) Try changing the transform property from transformZ to transformY. You will get a different effect in that the circles will move vertically.

another variation

2) Remove the background property from each span and make them share the same color. Let’s say we will go with #888888. Also add opacity:0.1 at 0% transform and opacity:1 at 100% transform . We will get a look like below:

one-color version

This way you can create unlimited unique and stylish loading animations without having to go through troublesome Photoshop methods.

You can, of course, use your CSS3 creativity to make more decorated objects than just the circles I’ve used for explanatory purposes.

I hope you enjoyed the post and this small CSS trick. If you have any queries then leave a note below in the discussions section.

Think you know CSS? Test your skills here.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.siteup.ro Vladi

    Good one. The only thing missing from the article is mentioning browser compatibility.

  • Aankhen

    Great little tutorial. Thanks!

  • Ognjen

    Hi,
    I have just tried your demo URL in IE9 and it does not work like it does in Firefox.
    Do I need to change some settings in my IE?
    Thanks

    • http://www.extremecss.com/ Syed Fazle Rahman

      The above animation is dependent on CSS3 transform which is not supported by IE.

  • http://www.tateossiancufflinks.com Muhammad Usama

    Very informative article of CSS3. Demo is also Awosome.

  • http://www.telegraphicsinc.com JoE

    Love it! Especially the part about giving the user a feel of complex processing. I think this is extremely important, especially in a mobile setting where you may be loading a responsive design w/ CSS used to deactivate content areas. Only thing I don’t know is how would you set this to load before everything else and then disappear? Javascript? CSS?

    • http://www.extremecss.com/ Syed Fazle Rahman

      Thanks for liking the article. :) you can use JavaScript to handle click event and then show or hide the loading division.

  • Eddie

    Yes, I noticed that it looks different in FF, Chrome and Safari and doesn’t work at all in IE9 and Opera12.

    • http://www.extremecss.com/ Syed Fazle Rahman

      Right.. Browsers with limited or no support for css3 transformations will show problems in running the animations. Since the web is moving towards a progressive path and so are Internet users, using CSS3 animations will not hamper your website’s loading. For older browsers you can use gif images as an alternate option.

  • http://www.devon-designs.com/ Devon Designs

    I’ve made up my mind that focus requires a price to pay. I don’t mean to say focus costs money. I mean to say that you have to give up on many things that seem to require your attention.
    Don’t get me wrong, I do love to learn new techniques, methods, tricks, etc. and the above are tempting me to learn, master and add to my tool box. But perhaps I should stay aloof. A true dilemma.

  • http://www.davidbrouwer.nl Davy Brouwer

    Nice loading future.
    Is it also possible to do this with a special character?
    I like to do this with 0xFC (Webdings)

    • http://www.extremecss.com/ Syed Fazle Rahman

      Yes of course you can replace span elements with special characters with little bit of edit in CSS.

  • http://www.aguaesolutions.com/webdesign.html aguae

    Great Article. Demo are awesome. Thanks for sharing this useful material.