JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

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

SCSS

$normal: 10px;
$large: 15px;
$largeborder: 25px;
$speed: 1.5s;/* 1.5s; */
$dot: 2px;
$width: 50px;

@keyframes pulsate {
    0% {
        opacity: 1;
        height: $large;
        width: $large;
        top: 0;
        left: 0;
    }
    10% {
        opacity: 1;
        height: $normal;
        width: $normal;
        top: ($large - $normal)/2;
        left: ($large - $normal)/2;
    }
    90% {
        opacity: 1;
        height: $normal;
        width: $normal;
        top: ($large - $normal)/2;
        left: ($large - $normal)/2;
    }
    100% {
        opacity: 1;
        height: $large;
        width: $large;
        top: 0;
        left: 0;
    }
}

@keyframes pulsateborder {
    0% {
        opacity: 1;
        height: $largeborder;
        width: $largeborder;
        top: ($large - $largeborder)/2;
        left: ($large - $largeborder)/2;
    }
    10% {
        opacity: 1;
        height: $normal;
        width: $normal;
        top: ($large - $normal)/2;
        left: ($large - $normal)/2;
    }
    90% {
        opacity: 1;
        height: $normal;
        width: $normal;
        top: ($large - $normal)/2;
        left: ($large - $normal)/2;
    }
    100% {
        opacity: 1;
        height: $largeborder;
        width: $largeborder;
        top: ($large - $largeborder)/2;
        left: ($large - $largeborder)/2;
    }
}

@keyframes pulsatedotA {
    0% {
        visibility: visible;
        height: $dot;
        width: $dot*2;
        top: ($large - $dot)/2;
    }
    10% {
        height: $dot*2;
        width: $dot*2;
        top: $large/2 - $dot;
    }
    20% {
        height: $dot;
        width: $dot*2;
        top: ($large - $dot)/2;
    }
    80% {
        height: $dot;
        width: $dot*2;
        top: ($large - $dot)/2;
    }
    90% {
        height: $dot*2;
        width: $dot*2;
        top: $large/2 - $dot;
    }
    100% {
        height: $dot;
        width: $dot*2;
        top: ($large - $dot)/2;
    }
}

@keyframes...

JavaScript

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