Google uses many different loading animations. The one we’ll be recreating today has four differently colored balls, bouncing in a horizontal line.
First we’ll need some <div>
s to manipulate.
<div class="wrapper">
<div class="blue ball">
<div class="red ball">
<div class="yellow ball">
<div class="green ball">
</div>
That’s all the HTML that’s needed. Everything else is in CSS.
For the sake of example, I want the animation to appear centered on the page. I’ll use the flexbox model for this.
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
There are a few common properties of all four balls.
.ball {
width: 22px;
height: 22px;
border-radius: 11px;
margin: 0 10px;
}
The equal width
and height
makes them squares, and the border-radius
rounds the corners all the way until they appear round. The margin
spaces them apart from one-another.
Each of the balls will have a different color. Here they are:
.blue { background-color: #4285F5; }
.red { background-color: #EA4436; }
.yellow { background-color: #FBBD06; }
.green { background-color: #34A952; }
We want all the balls to bounce, so we’ll define the keyframes (or keyframe, actually) for an animation called “bounce”.
@keyframes bounce {
50% {
transform: translateY(25px);
}
}
This single keyframe states that the ball should be translated (moved) 25 pixels down on the Y (vertical) axis 50% through the animation. Because there are no other keyframes, it can be inferred that each ball will be sitting at it’s original position at 0% at 100% through the animation. This gives the bouncing effect.
Let’s apply the animation to the all four balls.
.ball {
width: 22px;
height: 22px;
border-radius: 11px;
margin: 0 10px;
**animation: 2s bounce ease infinite;**
}
The balls will bounce every 2 seconds indefinitely. They will be eased in and out.
There’s one problem: all four balls bounce at the same time. We can fix this by applying a different animation-delay on each one.
.red {
background-color: #EA4436;
**animation-delay: .25s;**
}
.yellow {
background-color: #FBBD06;
animation-delay: .5s;
}
.green {
background-color: #34A952;
animation-delay: .75s;
}
Why is .blue
missing in the code above? Because we don’t want to delay that ball. It should start bouncing immediately.
That’s it. The complete code looks like this:
<!-- HTML -->
<div class="wrapper">
<div class="blue ball"></div>
<div class="red ball"></div>
<div class="yellow ball"></div>
<div class="green ball"></div>
</div>
/* CSS */
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 200px
}
.ball {
width: 22px;
height: 22px;
border-radius: 11px;
margin: 0 10px;
animation: 2s bounce ease infinite;
}
.blue {
background-color: #4285F5;
}
.red {
background-color: #EA4436;
animation-delay: .25s;
}
.yellow {
background-color: #FBBD06;
animation-delay: .5s;
}
.green {
background-color: #34A952;
animation-delay: .75s;
}
@keyframes bounce {
50% {
transform: translateY(25px);
}
}
And the result looks like this: