JSFiddle - React, Tailwind, and code Playground

by myrluk3

HTML

<div class="tr-spinner-container">
        <div class="tr-spinner">
            <div class="cube1"></div>
            <div class="cube2"></div>
            <div class="cube3"></div>
            <div class="cube4"></div>
        </div>
    </div>

CSS

.tr-spinner-container {
  position: relative;
  background: none;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.tr-spinner {
  position: relative;
  transform: scale(0.8);
  }

  .cube1, .cube3 {
    background-color: red;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
    animation: sk-cubemove 1.8s infinite ease-in-out;
  }
  .cube2, .cube4 {
    background-color: white;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 40px;

    -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
    animation: sk-cubemove 1.8s infinite ease-in-out;
  }
  .cube3 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }

  .cube4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
    left: -40px
  }

  @-webkit-keyframes sk-cubemove {
    25% {
      -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5)
    }
    50% {
      -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg)
    }
    75% {
      -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
    }
    100% {
      -webkit-transform: rotate(-360deg)
    }
  }

  @keyframes sk-cubemove {
    25% {
      transform: translateX(42px) rotate(-90deg) scale(0.5);
      -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    }
    50% {
      transform: translateX(42px) translateY(42px) rotate(-179deg);
      -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    }
    50.1% {
      transform: translateX(42px) translateY(42px) rotate(-180deg);
      -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);

    }
    75% {
      transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
      -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    }
    100% {
     ...