JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div class="loading-dots">
  <div class="loading-dots--dot"></div>
  <div class="loading-dots--dot"></div>
  <div class="loading-dots--dot"></div>
  <div class="loading-dots--dot"></div>
  <div class="loading-dots--dot"></div>
</div>

SCSS

@keyframes dot-keyframes {
  0% {
    opacity: .4;
    transform: scale(1, 1);
  }

  50% {
    opacity: 1;
    transform: scale(1.2, 1.2);
  }

  100% {
    opacity: .4;
    transform: scale(1, 1);
  }
}

.loading-dots {
  text-align: center;
  width: 100%;
  
  &--dot {
    animation: dot-keyframes 1.5s infinite ease-in-out;
    background-color: #00A1E2;
    border-radius: 10px;
    display: inline-block;
    height: 10px;
    width: 10px;
    margin: 0 1px;
    
    &:nth-child(1) {
      animation-delay: 0.25s;
    }
    &:nth-child(2) {
      animation-delay: .5s;
    }
    
    &:nth-child(3) {
      animation-delay: 1s;
    }
    &:nth-child(4) {
      animation-delay: 1.2s;
    }
    &:nth-child(5) {
      animation-delay: 1.5s;
    }    
  }
}