JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

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

CSS

@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 {
      height: 20px;
      width: 20px;
      left: 100%;
      top: 2.5px;
      animation-timing-function: ease-in;
      z-index: 3;
  }
  25% {
      height: 25px;
      width: 25px;
      left: 50%;
      top: 0;
      animation-timing-function: ease-out;
      z-index: 3;
  }
  50% {
      height: 20px;
      width: 20px;
      top: 2.5px;
      left: 0%;
      animation-timing-function: ease-in;
      z-index: 3;
  } 
  75% {
      height: 15px;
      width: 15px;
      top: 5px;
      left: 50%;
      animation-timing-function: ease-out;
      z-index: 1;
  }
  to {
      height: 20px;
      width: 20px;
      top: 2.5px;
      left: 100%;
      z-index: 1;
  }
}

.loading {
    width: 40px;
    position: relative;
    height: 25px;
    transition-duration: 1s;
    transition-property: width, left;
    left: 200px;
}

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

.loading.done:before, .loading.done:after {
    animation: none;
    height: 20px;
    width: 20px;
    transition-property: height, width, left, background;
    left: 0;
    transition-duration: 1s, 1s, 1s, 0.2s;
}

.loading.done:before {
    background: blue;
}

.loading.done:after {
    background: transparent;
}

.loading:before, .loading:after {
    background: blue;
    display: block;
    position: absolute;
    content: "";
    border-radius: 50%;
    animation: rotate 1s, colorwheel 5s;
    animation-iteration-count: infinite;
}

.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);