JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<div id="spinner">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

SCSS

#spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}

@keyframes theAnimation {
  from {opacity: 1;}
  to {opacity: 0;}
}

.inner {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: black;
  animation: 1s linear infinite theAnimation;
  position: absolute;
  transform-origin: -15px 50%;
  opacity: 0;
}

$var: #{"&"};
@for $i from 1 through 8 {
  .inner {
    #{$var} {
        transform: translateX(15px) rotate(45deg * $i);
        animation-delay: 1s / 8 * $i;
    }
  }
  $var: append($var, #{"+ &"});
}