JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="loading">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

div.loading {
    width: 60px;
    height: 18px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -9px 0 0 -30px;
}

div.loading div {
    width: 18px;
    height: 18px;
    display: block;
    float: left;
    margin: 0 1px;
    background-color: #29e5b7;
    border-radius: 100%;
    transform:scale(0);
    animation: loading 1.2s infinite ease-in-out;
}

div.loading div:nth-child(1) {
    animation-delay: -0.32s;
}

div.loading div:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes loading {
    12%,24%,40%{ transform:scale(1)}
}