Travis Horn
Travis Horn

Travis Horn

Recreate the Google Loading Animation using only CSS

Recreate the Google Loading Animation using only CSS

Travis Horn's photo
Travis Horn

Published on Sep 14, 2017

3 min read

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:

 
Share this