JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<div class="load">
  <div class="c n1"></div><div class="c n2"></div>
  <div class="c n3"></div><div class="c n4"></div>
  <div class="c n5"></div><div class="c n6"></div>
  <div class="c n7"></div><div class="c n8"></div>
</div>

CSS

@keyframes girar{
  50%{opacity: o;}
}
.load{
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  animation: girar 1s infinite;
}
.c{
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: gray;
}
.c.n1{
  top: 20px;
  left: -3px;
}
.c.n2{
  top: 3px;
  left: 3px;
}
.c.n3{
  top: -3px;
  left: 20px;
}
.c.n4{
  top: 3px;
  left: 37px;
}
.c.n5{
  top: 20px;
  left: 43px;
}
.c.n6{
  top: 37px;
  left: 37px;
}
.c.n7{
  top: 43px;
  left: 20px;
}
.c.n8{
  top: 37px;
  left: 3px;
}