JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

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

SCSS

$normal: 10px;
$normalborder: 15px;
$speed: 2s;
$distance: 15px;

.loading {
    left: 200px;
    width: 0;
    position: relative;
    top: 30px;
    transition-property: left;
    transition-duration: 2s;
    transform: scale(1.1);
}

.loading .disc {
    position: absolute;
    border-radius: 50%;
    height: $normal;
    width: $normal;
    background: blue;
    transition-property: transform;
    transition-duration: 1s;
}

.loading .disc:after {
    content: "";
    display: block;
    position: absolute;
    top: ($normal - $normalborder)/2 - 1;
    left: ($normal - $normalborder)/2 - 1;
    border: 1px blue solid;
    height: $normalborder;
    width: $normalborder;
    border-radius: 50%;
}

.loading .disc:nth-child(1) {
    transform: translate(0, 0 - $distance);
    animation: discA $speed;
    animation-iteration-count: infinite;
}
.loading .disc:before {
    content: "";
    position: absolute;
    display: block;
    width: $distance*1.8;
    height: 1.2px;
    top: $normal/2;
    left: $normal/2;
    background: blue;
    transform-origin: 0 0;
    transition-property: width;
    transition-duration: 1s;
}
.loading.done .disc:before {
    animation: none;
    width: 0;
}
.loading .disc:nth-child(1):before {
    animation: lineA $speed;
    animation-iteration-count: infinite;
}
.loading .disc:nth-child(2):before {
    animation: lineB $speed;
    animation-iteration-count: infinite;
}

.loading .disc:nth-child(3):before {
    animation: lineC $speed;
    animation-iteration-count: infinite;
}

.loading .disc:nth-child(2) {
    transform: translate(-0.8660254037844388*$distance, 0.4999999999999998*$distance);
    animation: discB $speed;
    animation-iteration-count: infinite;
    animation-delay: $speed/3;
}

.loading .disc:nth-child(3) {
    transform: translate(0.8660254037844384*$distance, 0.4999999999999998*$distance);
    animation: discC $speed;
    animation-iteration-count: infinite;
    animation-delay: 2*$speed/3;
}


@keyframes discA {
...

JavaScript

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