JSFiddle - React, Tailwind, and code Playground

by samunplugged

HTML

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

CSS

body { background: black; color: white; font-weight: bold; }

.dot {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  vertical-align: middle;
  position: relative;
  z-index: 2;
}
@keyframes circle {
  0% {
     background-image:
        /* 10% = 126deg = 90 + ( 360 * .1 ) */
        linear-gradient(90deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
  }
  100% {
     background-image:
        /* 10% = 126deg = 90 + ( 360 * .1 ) */
        linear-gradient(126deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
  }
}
.dot:before {
  content: '';
  background: grey;
  display: inline-block;
  position: absolute;
  animation: circle;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  animation: circle 3s;
}