JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<div class="loading-spinner">
  <span class="stick stick-1"></span>
  <span class="stick stick-2"></span>
  <span class="stick stick-3"></span>
</div>

SCSS

body {
  padding: 100px;
}
@keyframes stick-anim-1 {
  0%   { transform: rotateZ(0deg) translateY(0px) translateX(0px); }
  50% { transform: rotateZ(-20deg) translateY(-6.5px) translateX(2.5px); }
  100% { transform: rotateZ(0deg) translateY(0px) translateX(0px); }
}
@keyframes stick-anim-2 {
  0%   { transform: rotateZ(0deg) translateY(0px) translateX(0px); }
  50% { transform: rotateZ(20deg) translateY(-6.5px) translateX(-2.5px); }
  100% { transform: rotateZ(0deg) translateY(0px) translateX(0px); }
}
@keyframes stick-anim-3 {
  0%   { transform: rotateZ(0deg); }
  100% { transform: rotateZ(-20deg); }
}

.loading-spinner {
  position: relative;
  .stick {
    background: #ed1750;
    width: 40px;
    height: 3px;
    position: absolute;
    display: block;
    transition: transform 1s ease;
  }
  .stick-1 {
    animation: stick-anim-1 1s infinite;
  }
  .stick-2 {
    animation: stick-anim-2 1s infinite;
    left: 37px;
  }
  .stick-3 {
    transform: rotateZ(0deg);
    left: 75.4px;
    width: 60px;
  }
}