Creating “Loading” Animations Using Only CSS3

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 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:

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

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.

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.

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 andopacity:1 at 100% transform . We will get a look like below: