Create a Bouncing Page Loader with CSS3 Animations

Introduction

Side projects are not only fun but they bring a whole lot of learning experience for you. While hunting for a pre-built page loader for a website I ended up coding one for myself.

Initially, I had a view that implementing CSS3 animations are quite a cumbersome task so, I looked for an online service for creating simple animations. However, I didn’t find a reasonable page loading CSS animations which met my project’s requirements. I wanted something neat and simple.

After toying around with the code in less than an hour I managed to build a simple implementation of a bouncing page loading experience with CSS3 animation keyframes which I am super excited to share with you.

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

Project Research

I didn’t jump to CSS @keyframes “at-rule” right away. It took me some time and research to figure out an effective way to code a page loading experience.

Initially, I started playing with the CSS Transitions which help you change CSS property values, over a range of time. But I wanted to keep the process as simple as it can get and the @keyframes “at-rule” served me best.

Project Setup

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

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>

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

CSS Styles

Let’s first 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;
}

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

Styling .loader Class

Next, I styled my page loader with the following properties:

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

I used 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 my page loader is square. To give it a circular shape I set the border-radius to 50%. Just uploading a GIF to show how the loader looks like without the border-radius property.

I also added a bit of a margin between the circles but 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 about that and the animation delay properties below.

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 @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 which I wrote to create my 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);
  }
}

I am using 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, I used the CSS transform property to change the coordinates of a given element hence transforming the location of each circle.

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

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

Using Animation Delay with Keyframe

Now begins the final part. Since I have written the code for my @keyframe, it’s time to set it up and running. The kind of animation which you are viewing in the GIFs above 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 I 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 that in which direction is your animation going to play.

Apart from these, there are several other sub-properties as well. You can browse them from here.

Based on these I have defined my animation as follows:

animation: bouncingLoader 0.6s infinite alternate;

This line of code does the following things:

• Tells the loader element to use our keyframe bouncingLoader.
• It also sets the length of the animation to 0.6 seconds.
• It runs the animation an infinite number of times.
• Upon completion of one single cycle, the animation direction alternates (i.e., it reverses).

I have defined these properties for the first circle of my bouncing loader. To target the second (2) and the third (3) circle, I’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, I 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.

Conclusion

After developing this animation, I have realized that CSS is amazingly powerful. There are several ways of creating animations like this. I’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.