JSFiddle - React, Tailwind, and code Playground

by Yonas Hailu

HTML

<div class="loading-dot">
  <div class="dot first"></div>
  <div class="dot second"></div>
  <div class="dot third"></div>
</div>

CSS

.loading-dots {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    min-width: 36px;
}
.dot {
  height: 8px;
  width: 8px;
  margin: 0 1px;
  background: #FF0229;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bounceMe 1s infinite ease-in-out both;
  animation: bounceMe 1s infinite ease-in-out both;
}
.first {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.second {
   -webkit-animation-delay: -0.16s;
   animation-delay: -0.16s;
}
@-webkit-keyframes bounceMe {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes bounceMe {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}