Home / Snippets / CSS Snippet to create Animated Bouncing Loader

CSS Snippet to create Animated Bouncing Loader

Monday July 12, 2021

Lets create a animated bouncing loader using CSS3 animation key frames.

Here is what we will be making by the end of this tutoral:

CSS Snippet to create Animated Bouncing Loader
<div class="bouncing-loader">
  <span></span>
  <span></span>
  <span></span>
</div>
/* CSS for animated bouncing loader. */
:root {
  --main-color: #00dc7b;
  --height: 1rem;
}

.bouncing-loader {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Loader circles */
.bouncing-loader > span {
  background: var(--main-color);
  border-radius: 50%;
  margin: 2rem 0.5rem;
  animation: bouncingLoader 0.6s infinite alternate;
}

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

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

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