JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="loading">
  <div>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

SCSS

$loader-width: 10em;
$loader-shade: #C02942;
$loader-overlay: #ECD078;
$loader-overlay-opacity: 1;
$loader-duration: 1000;

body{
  padding: 2em 0;
  background-color: #343b3d;
}

.loading{
  width: $loader-width;
  position: relative;
  margin: $loader-width / 1.5 auto $loader-width / 2;
  perspective: $loader-width * 7;
  perspective-origin: center center;
  transform: translateX(30%);
  
  &:before{
    content: '';
    display: block;
    padding-top: 100%;
  }
  
  div{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: rotate3d(-1.2, 1.8, -0.35, 45deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
  }
  
  span{
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: $loader-shade;
    transform-origin: center center;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    
    &:after{
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      visibility: hidden;
      background-color: $loader-overlay;
      animation: loader-overlay-anim-1 #{$loader-duration}ms infinite linear;
      transform-style: preserve-3d;
    }
    
    &:nth-child(1){
      background-color: scale-color($loader-shade, $lightness: -30%);
      
      &:after{
        background-color: rgba(scale-color($loader-overlay, $lightness: -30%), $loader-overlay-opacity);
        animation-name: loader-overlay-anim-1;
        animation-delay: #{$loader-duration / 3}ms;
      }
      
    }
    
    &:nth-child(2){
      background-color: scale-color($loader-shade, $lightness: 35%);
      transform-origin: top center;
      transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100%, 0);
      
      &:after{
        background-color: rgba(scale-color($loader-overlay, $lightness: 35%), $loader-overlay-opacity);
        animation-name:...