Simple pure CSS loading to your pages

👋 Hello all! In this tutorial, I will illustrate the steps to design a CSS loading animation that bounces.

HTML

Add a class name called “loading” to <div> tag that wraps 3 divs. You can add any class name on your own. Each div from the parent will receive a style on the next CSS.

<div class="loading">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

For my CSS I am using Sass.

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  div {
    width: 1rem;
    height: 1rem;
    margin: 2rem 0.3rem;
    background: #FFF;
    border-radius: 50%;
    animation: 0.9s bounce infinite alternate;

    &:nth-child(2) {
      animation-delay: 0.3s;
    }

    &:nth-child(3) {
      animation-delay: 0.6s;
    }
  }
}

All .loading div child tags have the same style. The difference will be the animation delay for each one. To reach the div in order, we use the nth-child CSS propriety.

CSS Animation

The ‘animation’ shorthand property is a comma-separated list of animation definitions. Each item in the list gives one item of the value for all of the subproperties of the shorthand, which are known as the animation properties.

div {
    animation: 0.9s bounce infinite alternate;

    &:nth-child(2) {
      animation-delay: 0.3s;
    }

    &:nth-child(3) {
      animation-delay: 0.6s;
    }
  }
  
@keyframes bounce {
  to {
    opacity: 0.3;
    transform: translate3d(0, -1rem, 0);
  }
}

For the animation propriety, we used these sub-properties:

• animation-duration: 0.9s – the length of time it takes for an animation to complete one cycle.
• animation-name: bounce – declares the name of the @keyframes at-rule to manipulate.
• animation-iteration-count: infinite – the number of times the animation should be performed.
• animation-direction: alternate – sets the direction of the animation after the cycle. Its default resets on each cycle.
• And for the nth-child(2) and nth-child(3) we used the animation-delay: (0.3s and 0.6s, respectively) the time between the element being loaded and the start of the animation sequence.

In the @keyframes we declare the actions of the animation. It comes from div default properties to opacity: 0.3; transform: translate3d(0, -1rem, 0);

If you want to learn more about animation property in CSS, I do recommend reading this tutorial on css-tricks.

To implement this simple, but awesome loading to your page using javascript, to hide, when the page load, check out this post.