JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<div class="container">
    <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
</div>

CSS

.container {
    width: 500px;
    border: 1px solid black;
}

.spinner {
  margin: 40px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 10px;
  height: 8px;
  margin: 0 3px;
  background-color: #757f8f;
  border-radius: 2px;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out; }

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s; }

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s; }

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0); }
  40% {
    -webkit-transform: scale(1); } }

@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0); }
  40% {
    transform: scale(1); } }