Awesome infinite CSS loading animation
Intro
If you do not live in Romania (at the time I write this post Romania is in top 5 countries with fastest internet speeds) you probably spend a lot of time looking at the webpages how they are loaded. Text, fonts, colors, images and so on. Let's not talk about how many hours/days/weeks you lost looking at that.
Instead of showing how each web page element is loaded into the page, many websites covered the loading process with different animations. Looking at a beautiful animation may make time go faster.
In this article I'll try to show you how to build a simple and awesome loading animation for your website. This infinite loading animation is infinite from two points of view: because it loops forever and it looks like an infinity sign.
HTML and basic CSS
In the first step we will create the basic HTML and CSS we need for the animation. First, we need the following HTML markup:
<div class="loading-animation">
<span class="first-ball"></span>
<span class="second-ball"></span>
<span class="third-ball"></span>
</div>
We have a simple div that contains three span's. Each span is actually a ball in our animation.
Next, we will make a style.css file to customize some colors. Let's make them beautiful.
body {
overflow:hidden;
background:#ddd;
}
.loading-animation {
position:absolute;
top:50%;
left:50%;
}
.first-ball, .second-ball, .third-ball {
top:-50px;
left:-150px;
position:absolute;
background:#4286f4;
width:30px;
height:30px;
border-radius:50%;
}
Now we have 3 balls centered on the screen, almost. We positioned absolute the wrapper div and centered it with top and left properties both to 50%. All balls are also absolute positioned inside the div. I said 'almost centered' because they have a little offset because in the end they will float around the center.
You will notice only one ball on the screen, but don't panic. You see that because the other two balls are under the first one.
First move
In this step we will make the balls to make some movements with the help of @keyframes CSS rule.
To describe an animation with this rule we need to tell the browser specific CSS styles for specific moments in the animation. For this we can use percents or keywords from and to. So if we have a 10 seconds animation: 0% corresponds to the beginning, 30% will describe how things look after 3 seconds, 50% corresponds with the middle of the animation (after 5 seconds) and so on... the browser will make the magic between that.
In the end, our animation will use two CSS animations: one for vertical movement and one for horizontal. It is possible to make a single animation for both vertical and horizontal but we will use two animations because we want different timing functions for them. So we will use two @keyframes rules.
Lets' make the horizontal one.
@keyframes horizontal {
0% {
left:-150px;
}
50% {
left:150px;
}
100% {
left:-150px;
}
}
The horizontal animation has 3 steps. The first step is the same as the last one because we have an infinite animation and in the end of a cycle we need to have the objects in the same place as in the beginning.
We just defined the horizontal animation and now we have to add it to the three balls. Also, because the balls are moving, we can introduce some delays to the second and third balls in order to see them.
.first-ball, .second-ball, .third-ball {
...
animation:horizontal 2s infinite;
animation-timing-function:ease-in-out;
}
.second-ball {
animation-delay:0.2s;
}
.third-ball {
animation-delay:0.4s;
}
Next we will define the vertical animation:
@keyframes vertical {
0% {
top:-50px;
}
50% {
top:50px;
}
100% {
top:-50px;
}
}
Now, we need to apply both animations to the balls, but with different timings.
animation: horizontal 2s infinite, vertical 1s infinite;
animation-timing-function: ease-in-out, ease-in-out;
This doesn't look very much like an infinity sign, but we can adjust some things.
Some adjustments
Firstly, we will introduce a delay for the vertical animation and things will get better. The first value refers to the first animation (horizontal) and the second one refers to the vertical animation:
.first-ball, .second-ball, .third-ball {
...
animation-delay: 0s, .25s;
}
.second-ball {
animation-delay:0.2s, 0.45s;
}
.third-ball {
animation-delay:0.4s, 0.65s;
}
Second, let's see if we can do more with timing functions. We used ease-in-out value for both animations. This property specifies the curve of the animation. After I played a little bit with this property, I got a more realistic movement. If you have a good eye you will notice the difference 
.
animation: horizontal 2s infinite, vertical 1s infinite;
animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1), ease-in-out;
Now the animation is almost perfect, but I really don't like the beginning of the animation. It needs some improvements.
The balls start somewhere in the upper left corner, outside of the infinite sign. To get rid of that we can create a fadeIn animation and add it on the .loading-animation. Of course, only after I played with timing function, I arrived to this:
@keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
.loading-animation {
...
animation: fadeIn 2s 1;
animation-timing-function: cubic-bezier(.7, 0, 1, 1);
}
Some colors...
To make the animation look more professional we will add some colors, transparency and shadows. So we will make second and third ball a little bit less visible:
.second-ball {
...
opacity:0.7;
}
.third-ball {
...
opacity:0.5;
}
After that we can add some shadow to them:
.first-ball, .second-ball, .third-ball {
...
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
And finally the last CSS animation in this article, color:
@keyframes color {
50% {
background:#cd43ef;
}
}
This animation will also go on the three balls:
.first-ball, .second-ball, .third-ball {
...
animation:horizontal 2s infinite, vertical 1s infinite, color 3s infinite;
}
Variations
To get different variations of this animation you can play with duration, timing functions delays and also the positions of the balls.
Hope this was helpful for you!
