Pulse Loader in Pure CSS

A week ago I published a post on how to make a spinner in pure CSS. This time, I'm going to make something slightly more complicated: A Pulse Loader.

The HTML

The HTML for this is rather straight forward. All we need is a container element with two child elements to act as the ripples.

<div class="loader">
  <div class="pulse pulse1"></div>
  <div class="pulse pulse2"></div>
</div>

And that's all the HTML we'll need.

The CSS

The CSS is going to be a bit more complicated this time.

The container

First, we need to set the container styles.

.loader {
  /* Make sure it's a circle */
  width: 32px;
  height: 32px;
}

.loader {
  /* Make it be a circle */
  border-radius: 50%;
}

.loader {
  /* Make sure the children will behave */
  position: relative;
}

The last thing for the container is to give it some space to breathe. You can change this to whatever values you like, but keep in mind that the ripples will grow to twice the width and height. If we don't give it enough space, the ripples could be cut off.

.loader {
  /* Give it some space */
  margin: 2rem auto;
}

The pulses

As you can tell from the HTML, we're going to have two pulses. The styles of the pulses will be the same. The only thing that differs is the animation-delay but we'll get to that later.

First, create a border for the pulse. You can choose whatever color or thickness you want.

.loader .pulse {
  /* The color and thickness of the pulse */
  border: 3px solid blue;
}

.loader .pulse {
  /* Make sure the pulses don't interfere */
  position: absolute;
}

.loader .pulse{
  /* Fill up the parent */
  width: 100%;
  height: 100%;
}

.loader .pulse{
  /* Make it round */
  border-radius: inherit;
}

To give the animation a nicer effect, we'll also scale down the pulses slightly.

.loader .pulse{
  /* Scale down */
  transform: scale(0.5);
}

The last thing we'll do on the styles for the pulses is to set a transition for it's opacity. We do this because when the animation starts over we don't want the pulse to immediately appear. We want it to look smooth.

.loader .pulse{
  /* Make it smooth */
  transition: opacity 200ms linear;
}

That is all the actual styling we need.

The animation

Now, it's time to create the animation to make it look like it's pulsing.

Remember that we added individual class names to the pulses? We'll use those now!

First pulse:

.loader .pulse1{
  animation: pulse 1s infinite;
}

Second pulse:

.loader .pulse2{
  animation: pulse 1s 500ms linear infinite;
}

Now, the animation itself.

@keyframes pulse{
  to{
    transform: scale(2);
    opacity: 0;
  }
}

This will make it seem like the pulses disappear out into the void and new ones appear to grow from the middle.

And we're all done. We should now have a repeating pulse effect.

Putting it all together

Let's put everything together.

The HTML:

<div class="loader">
  <div class="pulse pulse1"></div>
  <div class="pulse pulse2"></div>
</div>

The CSS:

.loader{
  /* Make sure it's a circle */
  width: 32px;
  height: 32px;
  
  /* Make it be a circle */
  border-radius: 50%;
  
  /* Make sure the children will behave */
  position: relative;
  
  /* Give it some space */
  margin: 2rem auto;
}
.loader .pulse{
  /* The color and thickness of the pulse */
  border: 3px solid blue;
  
  /* Make sure the pulses don't interfere */
  position: absolute;
  
  /* Fill up the parent */
  width: 100%;
  height: 100%;
  
  /* Make it round */
  border-radius: inherit;
  
  /* Scale down */
  transform: scale(0.5);
  
  /* Make it smooth */
  transition: opacity 200ms linear;
}
.loader .pulse1{
  animation: pulse 1s infinite;
}
.loader .pulse2{
  animation: pulse 1s 500ms linear infinite;
}

@keyframes pulse{
  to{
    transform: scale(2);
    opacity: 0;
  }
}

Conclusion

Even though this pulse effect is slightly more complicated than the spinner we did last week, it is still fairly simple to create.

You can, of course, customize this effect in a number of ways. You could change the colors of the pulses or even use different colors for each of them. You could change the animation timing functions to get interesting variations. Or you could simply add more pulses.