JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<div class="loading"></div>
<input type="button" value="toggle done/loading" id="done">

SCSS

$breadth: 30px;
$small: 8px;
$large: 20px;
$normal: 15px;
$speed: 1s;

@keyframes colorwheel {
    0% {
        background: green;
        animation-timing-function: steps(1, end);
    }
    20% {
        background: yellow;
        animation-timing-function: steps(1, end);
    }
    40% {
        background: orange;
        animation-timing-function: steps(1, end);
    }
    60% {
        background: purple;
        animation-timing-function: steps(1, end);
    }
    80% {
        background: blue;
        animation-timing-function: steps(1, end);
    }
}

@keyframes rotate {
  from {
      visibility: visible;
      transform: scale(1) translateX($breadth);
      animation-timing-function: ease-in;
      z-index: 3;
  }
  25% {
      transform: scale($large/$normal) translateX($breadth/2);
      animation-timing-function: ease-out;
      z-index: 3;
  }
  50% {
      transform: scale(1) translateX(0);
      animation-timing-function: ease-in;
      z-index: 3;
  } 
  75% {
      transform: scale($small/$normal) translateX($breadth/2);
      animation-timing-function: ease-out;
      z-index: 1;
  }
  to {
      transform: scale(1) translateX($breadth);
      z-index: 1;
  }
}

.loading {
    width: 0;
    position: relative;
    height: $large;
    transition-duration: 1s;
    transition-property: width, left;
    left: 200px;
    transform: scale(1.1);
}

.loading.done {
    width: 0px;
    left: 0;
}

.loading.done:before, .loading.done:after {
    animation: none;
    transform: scale(1), translateX(0), translateY(($large - $normal)/2)
    transition-property: background, transform;
    left: 0;
    transition-duration: 0.4s, 1s;
}

.loading.done:before {
    background: blue;
    height: $normal;
    width: $normal;
}

.loading.done:after {
    background: transparent;
    border: 1px blue solid;
    height: $large;
    width: $large;
    visibility: visible;
    top: ($normal - $large)/2 - 1;
    left: ($normal - $large)/2 - 1;
}

.loading:before,...

JavaScript

done.addEventListener("click", function() {
	var list = document.querySelectorAll(".loading");
    for (var i=0; i<list.length; i++)
        list[i].classList.toggle("done");
}, false);