How To Create a Bouncing Page Loader with CSS3 Animations

Introduction

In this tutorial, you will create a bouncing page loader using CSS3 animation keyframes. It will show you how to style HTML for a loading page, create animation keyframes, and use animation delay with keyframes.

Here’s what you’ll be making by the end of this tutorial:

Or click use the following CodePen link to see a working example:

https://codepen.io/MaedahBatool/pen/wZxMjZ?editors=1100

Step 1 — Writing the HTML

First, let’s write the basic HTML for this project.

<p>A simple representation of an animated bouncing loader!</p>

<div class="loader">
  <span></span>
  <span></span>
  <span></span>
</div>

You added a div with the class called loader. This div is responsible for creating all the page loader elements. Inside this div, you added three consecutive span elements each representing a page loader circle.

Step 2 — Writing CSS Styles

Let’s next style our basic elements.

/*_ OPTIONAL: Styles for the demo. *_/
body {
  background: #2C294F;
  padding: 2rem;
}

p {
  font: 1rem/1.45 "Operator Mono";
  color: #A599E9;
  text-align: center;
}

This code block defines the optional CSS styles for the p tag and the body.

Styling the .loader Class

Next, style your page loader with the following properties:

/_ CSS for animated bouncing loader. _/
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
}

Here we use the Flexbox, i.e., display: flex; property to place the bouncing page loader in the middle of the page both horizontally and vertically.

/_ Loader circles _/
.loader > span {
  background: #FAD000;
  border-radius: 50%;
  margin: 5rem 0.5rem;
  animation: bouncingLoader 0.6s infinite alternate;
}

.loader > span:nth-child(2) {
  animation-delay: 0.2s;
}

.loader > span:nth-child(3) {
  animation-delay: 0.4s;
}

Each loader circle has width: 1rem; and height:1rem; with #FFB651 color. By default, the shape of the page loader is square. To give it a circular shape, you set the border-radius to 50%. The following GIF shows how the loader looks like without the border-radius property. You also added bit of a margin between the circles.

The following shows what the style would look like without setting border-radius.

The most interesting part here is the animation property. We are using an animation keyframe called bouncingLoader that runs once in 0.6s and repeats itself infinitely. Let’s talk more on that and the animation delay properties in a later section.

Step 3 — Creating Animation Keyframe

Keyframes are used to define the animation behavior and give us complete control of one cycle of a CSS animation. We define it as a @keyframes at-rule followed by the name of the animation, which is bouncingLoader in this case.

Inside a @keyframe rule, you use the keywords from and to in order to specify a starting and ending point for your animation. Equivalently, you can also use 0% for from which depicts the starting point and 100% for to depicting the ending point of your animation.

Moreover, if you want several animation transitions, you can define a range of percentages each containing a list of styling selectors. These percentages can be listed in any order and with any difference between them. A simple representation of these percentages is shown below:

@keyframes animationNameHere {
  0% { opacity: 1; }
  30% { opacity: 0.75; }
  50% { opacity: 0.5; }
  100% { opacity: 0.25; }
}

Let’s now write the code for the keyframe to create the bouncing page loader:

/_ Define the animation called bouncingLoader. _/
@keyframes bouncingLoader {
  from {
    width: 0.1rem;
    height: 0.1rem;
    opacity: 1;
    transform: translate3d(0);
  }
  to {
    width: 1rem;
    height: 1rem;
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}

This uses the keywords from and to, which define the basic styling properties of width, height, and opacity of the circles. Other than that, to create the bouncing effect, you used the CSS transform property to change the coordinates of a given element, hence transforming the location of each circle.

With this transform property, you’ve used the translate3D() function which takes three inputs explaining the change in (x, y, z) coordinates. Since we wanted our loader to run in a wave motion, we need to translate primarily along the y-axis keeping the x and z-axis constant. Thus, the ending point value is (0, -1rem, 0).

Let’s show a demo of how to play with this property. If you set your ending point value as transform: translate3d(1rem, 0rem, 1rem);, it’ll mean that you are transforming it along the x and z-axis while keeping your y-axis constant. Now your animation will look something like this:

Using Animation Delay with Keyframe

Now begins the final part. Since you have written the code for your @keyframe, it’s time to set it up and running. The kind of animation that you are viewing in the previous GIFs was made possible with the following few lines of code:

/_ Loader circles _/
.loader > span {
  background: #FAD000;
  border-radius: 50%;
  margin: 5rem 0.5rem;
  animation: bouncingLoader 0.6s infinite alternate;
}

.loader > span:nth-child(2) {
  animation-delay: 0.2s;
}

.loader > span:nth-child(3) {
  animation-delay: 0.4s;
}

You style the element you want to animate with the animation property and/or its sub-properties. Using this property you can control the timing, duration, and other details of your animation.

Here you have used the following animation sub-properties:

animation: animation-name, animation-duration, animation-iteration-count, animation-direction;

• animation-name: Defines the name of your animation which is loader in my case.
• animation-duration: Configures the length of time which your animation will take to complete one cycle.
• animation-iteration-count: Tells how many times you want your animation cycle to play before it stops.
• animation-direction: Defines which direction your animation is going to play.

Apart from these, there are several other sub-properties as well. You can browse through them in the Mozilla Web Docs.

Based on these, you have defined my animation as follows:

animation: bouncingLoader 0.6s infinite alternate;

This line of code does the following three things:

• Tells the loader element to use our keyframe bouncingLoader.

• Sets the length of the animation to 0.6 seconds.

• Runs the animation an infinite number of times.

• Upon completion of one single cycle, the animation direction alternates i.e., it reverses.

You have defined these properties for the first circle of your bouncing loader. To target the second (2) and the third (3) circle, you’ve used the nth-child(n) selector, which allows you to select and target one or more elements which are the nth-child of its parent. Moreover, for the remaining span elements, you have just defined the animation-delay, so that each element does not start to animate at the same time.

The Final Product

Here’s the complete code of this animated bouncing page loader:

HTML Code

<!-- HTML for Bouncing Page Loader -->
<p>A simple representation of an animated bouncing page loader!</p>

<div class="loader">
  <span></span>
  <span></span>
  <span></span>
</div>

CSS Code

/_ CSS for animated bouncing loader. _/
.loader {
  display: flex;
  justify-content: center;
    align-items: center;
}

/_ Loader circles _/
.loader > span {
  background: #FAD000;
  border-radius: 50%;
  margin: 5rem 0.5rem;
  animation: bouncingLoader 0.6s infinite alternate;
}

.loader > span:nth-child(2) {
  animation-delay: 0.2s;
}

.loader > span:nth-child(3) {
  animation-delay: 0.4s;
}

/_ Define the animation called bouncingLoader. _/
@keyframes bouncingLoader {
  from {
    width: 0.1rem;
    height: 0.1rem;
    opacity: 1;
    transform: translate3d(0);
  }
  to {
    width: 1rem;
    height: 1rem;
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}

/_ OPTIONAL: Styles for the demo. _/
body {
  background: #2C294F;
  padding: 2rem;
}

p {
  font: 1rem/1.45 "Operator Mono";
  color: #A599E9;
  text-align: center;
}

Here’s a working demo with CodePen for this.

You can fork this pen and try it out for yourself.

https://codepen.io/MaedahBatool/pen/wZxMjZ?editors=1100

Your turn

After developing this animation, CSS is shown to be amazingly powerful. There are several ways of creating animations like this. We’d love you hear your suggestions and the way you create CSS animations.

Thanks for reading! If this tutorial was helpful and has piqued your interest, try it out yourself and share your feedback in the comments section below.