JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

<div class="loader">
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
</div>

SCSS

$w: 2px;
$h: 40px;
$spacing: 100px;
$nb: 40;
$speedRotate: 15s;
$speedGrow: $speedRotate / $nb;
$horse: 'https://images-na.ssl-images-amazon.com/images/I/61M6f-FitAL._SY355_.jpg';
$horseSize: $spacing*1.5;

@keyframes rotate {
  to { transform: rotate(-360deg) }
}
@keyframes grow {
  from { top: 0 }
  to { top: $h }
}

.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  animation: rotate linear infinite $speedRotate;
  
  &:after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: $horseSize;
    height: $horseSize;
    margin: -$horseSize/2 0 0 -$horseSize/2;
    border-radius: 50%;
    background: url($horse);
    background-size: contain;
    animation: rotate linear infinite reverse $speedRotate;
  }
  
  i {
    position: absolute;
    bottom: 0; left: -$w/2;
    display: block;
    width: $w; height: $h + $spacing;
    
    &:before {
      content: '';
      position: absolute;
      top: 0; bottom: $spacing;
      width: 100%;
      background: steelblue;
      animation: grow linear alternate infinite $speedGrow;
    }
  }
  @for $i from 1 through $nb {
    i:nth-child(#{$i}) {
      transform: rotate(360deg / $nb * $i);
      transform-origin: $w/2 100%;
      
      &:before {
        animation-delay: -$i * $speedGrow / $nb * 16;
      }
    }
  }
}