JSFiddle - React, Tailwind, and code Playground

by zoldello

HTML

<div class="ispinner ispinner--gray ispinner--animating">
        <div class="ispinner__blade"></div>
        <div class="ispinner__blade"></div>
        <div class="ispinner__blade"></div>
        <div class="ispinner__blade"></div>
        <div class="ispinner__blade"></div>
        <div class="ispinner__blade"></div>
        <div class="ispinner__blade"></div>
        <div class="ispinner__blade"></div>
        <div class="ispinner__blade"></div>
        <div class="ispinner__blade"></div>
        <div class="ispinner__blade"></div>
        <div class="ispinner__blade"></div>
      </div>

CSS

.ispinner {
  position: relative;
  width: 10px;
  height: 15px;
  color: black;
  }
  .ispinner .ispinner__blade {
    position: absolute;
    left: 44.5%;
    top: 37%;
    width: 10%;
    height: 25%;
    border-radius: 50%/20%;
    -webkit-animation: ispinner__blade--fade 1s linear infinite;
    animation: ispinner__blade--fade 1s linear infinite;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    }
    .ispinner .ispinner__blade:nth-child(1) {
      -webkit-animation-delay: -1.66667s;
      animation-delay: -1.66667s;
      -webkit-transform: rotate(30deg) translate(0, -150%);
      transform: rotate(30deg) translate(0, -150%); }
    .ispinner .ispinner__blade:nth-child(2) {
      -webkit-animation-delay: -1.58333s;
      animation-delay: -1.58333s;
      -webkit-transform: rotate(60deg) translate(0, -150%);
      transform: rotate(60deg) translate(0, -150%); }
    .ispinner .ispinner__blade:nth-child(3) {
      -webkit-animation-delay: -1.5s;
      animation-delay: -1.5s;
      -webkit-transform: rotate(90deg) translate(0, -150%);
      transform: rotate(90deg) translate(0, -150%); }
    .ispinner .ispinner__blade:nth-child(4) {
      -webkit-animation-delay: -1.41667s;
      animation-delay: -1.41667s;
      -webkit-transform: rotate(120deg) translate(0, -150%);
      transform: rotate(120deg) translate(0, -150%); }
    .ispinner .ispinner__blade:nth-child(5) {
      -webkit-animation-delay: -1.33333s;
      animation-delay: -1.33333s;
      -webkit-transform: rotate(150deg) translate(0, -150%);
      transform: rotate(150deg) translate(0, -150%); }
    .ispinner .ispinner__blade:nth-child(6) {
      -webkit-animation-delay: -1.25s;
      animation-delay: -1.25s;
      -webkit-transform: rotate(180deg) translate(0, -150%);
      transform: rotate(180deg) translate(0, -150%); }
    .ispinner .ispinner__blade:nth-child(7) {
      -webkit-animation-delay: -1.16667s;
      animation-delay: -1.16667s;
      -webkit-transform:...