JSFiddle - React, Tailwind, and code Playground

by trkli

HTML

<div class="dot"></div>

CSS

.ellipsis {
  animation-name: dot;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  opacity: 0.2;
  margin-right: .05em;
}

.animated-ellipsis-2 {
  animation-delay: .2s;
}

.animated-ellipsis-3 {
  animation-delay: .4s;
}





.dot, .dot:before, .dot:after {
  position: absolute;
  width: .375rem;
  height: .375rem;
  border-radius: 100%;
  background: rgba(150, 150, 150, 0.4);
  animation: dot 1s ease-in-out infinite;
  animation-delay: .2s;
}

.dot:before, .dot:after {
  content: "";
}

.dot:before {
  right: .5rem;
  animation-delay: 0s;
}

.dot:after {
  left: .5rem;
  animation-delay: .4s;
}

@keyframes dot {
  0% {
    background: rgba(150, 150, 150, 0.4);
  }
  33% {
    background: rgba(150, 150, 150, 0.4);
  }
  66% {
    background: rgba(150, 150, 150, 0.4);
  }
  100% {
    background: rgba(150, 150, 150);
  }
}