JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

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

SCSS

$border-size: 0.5em;
$loader-size: 3em;
$background-color: #65507f;
$border-color-1: rgba(255,255,255,0.66);
$border-color-2: rgba(255,255,255,0.66);
$animation-speed: 0.7;

body{
  background-color: #9177af;
}

*,
*:before,
*:after{
  box-sizing: border-box;
}

.loading{
  background-color: $background-color;
  width: $loader-size;
  height: $loader-size;
  margin: 4em auto;
  position: relative;
  
  &:before{
    content: '';
    border-left: $border-size solid #000;
    position: absolute;
    top: 0;
    bottom: 100%;
    left: 0;
    right: 0;
    animation: loader-v #{$animation-speed}s infinite;
    animation-timing-function: linear;
    animation-delay: #{($animation-speed/4)}s;
  }
  
  &:after{
    content: '';
    border-top: $border-size solid #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    animation: loader-h #{$animation-speed}s infinite;
    animation-timing-function: linear;
  }
  
}

@keyframes loader-v{
  0%{
    top: 0;
    bottom: 100%;
    left: calc(100% - #{$border-size});
    right: 0;
    border-color: $border-color-1;
  }
  
  25%{
    top: 0;
    bottom: 0;
    left: calc(100% - #{$border-size});
    right: 0;
    border-color: $border-color-1;
  }
  
  50%{
    top: 100%;
    bottom: 0;
    left: calc(100% - #{$border-size});
    right: 0;
    border-color: $border-color-1;
  }
  50.01%{
    top: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    border-color: $border-color-2;
  }
  
  75%{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-color: $border-color-2;
  }
  
  100%{
    top: 0;
    bottom: 100%;
    left: 0;
    right: 0;
    border-color: $border-color-2;
  }
}

@keyframes loader-h{
  0%{
    top: 0;
    bottom: 0;
    left: 0;
    right: 100%;
    border-color: $border-color-1;
  }
  
  25%{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-color: $border-color-1;
  }
  
  50%{
    top: 0;
    bottom: 0;
    left: 100%;
    right: 0;
    border-color:...