How to make a loading animation for a website, the typical Ajax loader, using only CSS to animate its elements.

I feel very comfortable working with CSS on a day-to-day basis, but many times I find real crazy things posted on the Internet by other developers and I am absolutely amazed. They do have level. It is the case of loader with css. I have to admit that if you search the web you will find spectacular animations to offer the user feedback while receiving the server response to an Ajax request.

That being said, I do think I am able to explain the bases you could use to create your own CSS animation, as well as customize its operation, so I have started to write this article, using an animation that I will implement in a Web Component that we will publish in the . It will be a simple but very successful animation, not only for making things simple enough, but also because I lack the patience to measure spaces, element sizes and times, as well as to project the animation cycle.

Marked for animation

The first thing we have to define when making an animation is which HTML elements will participate. If we have the typical wheel turning, maybe with a single element we will get a good result, but sometimes the animations consist of several elements that “dance” in a synchronized, but independent way.

Therefore, it depends on our objective animation we will need a markup. This will consist of a parent element, with several child elements. The parent element will be the entire block and the children will be the eelements that will be moved or resized to achieve that animation.

For example, we are going to build an animation with three vertical bars that grow and decrease in size, so we are going to use a markup with a parent and three child elements.

As you can see, the main tag has a CSS class which is what makes it become the loader.

Again, if our animation consists of more bars or more balls moving, then we would simply need to add more children to the parent container.

CSS for the loader

We are going to do the important part of this exercise, which is to apply the CSS styles to the elements and of course for the animation. We’ll start by looking at the CSS for the container part:

.loader { display: flex; align-items: center; justify-content: space-between; width: 60px; height: 50px; }

We have defined some dimensions, but above all where we have relied is the specification of to ensure that the elements are positioned in the space reserved for them.

With justify-content: space-between we achieve that, given the space available in the width, the child elements are distributed so that there is a proportional space between them.

If you had more children, with other bars that move, you would simply have to give the element a greater width and with the same “flex” distribution they would fit just as well.

Now we are going to see how the styles would be for the children.

.loader div { width: 12px; background: #888; animation: loader 1.8s linear infinite; }

We simply give them a width and background color. This is where you could customize your animationmaking the bars thinner or wider, as well as the color to suit your website.

In addition, the animation that we are going to perform is specified with the “animation” property. The animation is called “loader” and it will last 1.8 seconds, its progression being linear.

CSS animation

Now comes the part where we will make the animation itself. To specify it we have to indicate a series of “keyframes” stages of the animation. The more stages, the more complex the animation will be.

Remember that you can learn how to make animations in the . We also have another series of articles with more elaborate examples of animations, they can give you even more possibilities for practice. In fact, in it you will find a series of articles dedicated to animations, which will be there unless we decide to make a monographic manual for animations, since we have a lot of material on the subject.

For our example, the keyframes or keyframes of the animation would look like this:

@keyframes loader { 0% { height: 12px; } 25% { height: 50px; } 50% { height: 10px; } 75% { height: 25px; } 100% { height: 12px; } }

As we have left the animation will affect all the elements equally, but we could establish a animation delay for some of the elementsin this case we will do it with the central one, so that it does not move at the same time as the others.

We will achieve this with the animation-delay property, applying the style to the second child element of the loader.

.loader div:nth-child(2) { animation-delay: -0.25s; }

With this small detail the animation changes quite a bit, as you will be able to see if you play a little with the CSS code.

Complete CSS animation code

To see the complete result of this animation I am going to share this code of an HTML page where we have launched the loader.

CSS animation to implement a Loader

I hope you liked it and you can use this knowledge to create your own CSS animations, or use this same animation directly in a web project. With a little time, I am also sure that you will be able to change the code, the parameters of the animation, its shape or colors, to adjust it to your needs.