Let's Implement a Really Cool Loading Animation with Only CSS or Sass 👩‍🎨👨‍🎨

Hey guys, how are you?!

I'm thinking about creating some small, direct articles to talk/implement/show something cool, like:

• An interesting Javascript thing
• A cool CSS animation
• An interesting Angular tip

And other things in a simple, demonstrative and direct way! So let's try it and see how it goes!

So, let's start it!

---

🎨 Loading Animation

First, we need to create the css or sass file. I'll show how we can implement animation with css and sass.

So please create the css or sass file and import it into your project!

The animation will look like below:

The animations are not cool in the gif because it is not in high quality and my tool broke the gif a little.

Now, let's implement it!

---

🧩 The HTML Balls Structure:

Basically we need a div and three span with the ball selector, so the structure will be like below:

<div class="content-balls">
  <span class="ball-0"></span>
  <span class="ball-1"></span>
  <span class="ball-2"></span>
</div>

---

👩‍🎨 CSS Implementation:

First, we will implement it with just css. So, we will implement it in css:

• The content style of the balls (To center the balls)
• The style of balls (Called ball-0, ball-1, ball-2)
• Keyframe animation (Called animatedBall to make ball transitions)

.content-balls {
    position: relative;
    text-align: center;
    padding: 1rem 0;
}

.ball-0 {
    background-color: #dc3545;
    padding: 0.4rem;
    border-radius: 50%;
    margin: 0 0.25rem;
    display: inline-block;
    animation: animatedBall 1s ease-in;
    animation-iteration-count: infinite;
    animation-delay: 0s;
}

.ball-1 {
    background-color: #0dcaf0;
    padding: 0.4rem;
    border-radius: 50%;
    margin: 0 0.25rem;
    display: inline-block;
    animation: animatedBall 1s ease-in;
    animation-iteration-count: infinite;
    animation-delay: 0.25s;
}

.ball-2 {
    background-color: #ffc107;
    padding: 0.4rem;
    border-radius: 50%;
    margin: 0 0.25rem;
    display: inline-block;
    animation: animatedBall 1s ease-in;
    animation-iteration-count: infinite;
    animation-delay: 0.5s;
}

@keyframes animatedBall {
    0% {
      transform: translateY(0);
    }
    25% {
      transform: translateY(50%);
    }
    50% {
      transform: translateY(70%);
    }
    75% {
      transform: translateY(-50%);
    }
    100% {
      transform: translateY(0);
    }
}

---

👨‍🎨 SASS Implementation:

With sass we can improve the code structure and do the same thing with less code (Sass is really cool, if you don't know it, please learn it!)

Then, the structure will be as below:

@for $item from 0 through 2 {
  .ball-#{$item} {
    padding: .4rem;
    border-radius: 50%;
    margin: 0 .25rem;
    display: inline-block;
    animation: animatedBall 1s ease-in;
    animation-iteration-count: infinite;
    animation-delay: #{$item * .25}s;
  }
}

.content-balls {
    position: relative;
    text-align: center;
    padding: 1rem 0;
}

@keyframes animatedBall {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(50%);
  }
  50%{
    transform: translateY(70%);
  }
  75% {
    transform: translateY(-50%);
  }
  100%{
    transform: translateY(0);
  }
}

---

🧠 Understanding the block's of code:

Let's look and understand some interesting parts of the codes.

🎯 Balls Structure:

Let's understand some interesting properties in the .ball-* class structure:

• Using CSS:

.ball-* {
    padding: 0.4rem;
    border-radius: 50%;
    margin: 0 0.25rem;
    display: inline-block;
    animation: animatedBall 1s ease-in;
    animation-iteration-count: infinite;
    animation-delay: 0s; // This property has variations
}

• Using SASS:

To optimize our development we can use @for from sass, which is an excellent option because all of our ball classes share the same properties:

@for $item from 0 through 2 {
  .ball-#{$item} {
    padding: .4rem;
    border-radius: 50%;
    margin: 0 .25rem;
    display: inline-block;
    animation: animatedBall 1s ease-in;
    animation-iteration-count: infinite;
    animation-delay: #{$item * .25}s;
  }
}

• animation-iteration-count: Property so that the animation is infinite, it does not end.
• animation-delay: Important property, you can see that each class has a type of delay, this causes each ball to be animated after a certain time in relation to the other.

🎯 Transition Structure:

@keyframes animatedBall {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(50%);
  }
  50%{
    transform: translateY(70%);
  }
  75% {
    transform: translateY(-50%);
  }
  100%{
    transform: translateY(0);
  }
}

Here is the core of the animation, we transition the balls in the Y shape making them go from bottom to top using @keyframes and the animation percentage.

---

And now we have our wonderful animation, now we can use it anywhere, making our website more beautiful and with a better user experience!

Even though the animation is simple, it's always cool to do some to practice our creativity.

You can see them working on my website, take a look at how they look: Live Demo

I hope you liked it and that this animation helps you or inspires you to create others!

If you have any questions, suggestions or anything else, please leave a comment!

See you soon 😁🤘