JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" >
        <rect width="100" height="50" fill="#f0f0f0"/>	
      <!--  <circle   cx="50" cy="50" r="25" stroke="#eeeeee" stroke-width="0" fill="#fafafa" />-->
        <circle class="loadRotator loadC1"  cx="50" cy="50" r="12" stroke="#eeeeee" stroke-width="0" fill="#eeaa00" fill-opacity="0.4"/>
        <circle class="loadRotator loadC2"  cx="50" cy="50" r="12" stroke="#eeeeee" stroke-width="0" fill="#aa00ee" fill-opacity="0.4"/>
        <circle class="loadRotator loadC3"  cx="50" cy="50" r="12" stroke="#eeeeee" stroke-width="0" fill="#00eeaa" fill-opacity="0.4"/>
      </svg>

CSS

@keyframes loadRot {
        0%   {transform: rotateY(90deg);transform-origin: 50% 50%;}
        50%  {transform: rotateY(260deg);transform-origin: 50% 50%;}
        100% {transform: rotateY(450deg);transform-origin:50% 50%;}
      }
      
      .loadRotator {
        transform-origin: 50% 50%;
      }
      .loadC1{animation-delay: -1s;animation: loadRot 5s linear normal infinite;}
      .loadC2{animation-delay: -1s;animation: loadRot 4s linear normal infinite;}
      .loadC3{animation-delay: -2s;animation: loadRot 3s linear normal infinite;}