JSFiddle - React, Tailwind, and code Playground

by clawfire

HTML

<em>Loading</em>
<span class="l-1"></span>
<span class="l-2"></span>
<span class="l-3"></span>
<span class="l-4"></span>
<span class="l-5"></span>
<span class="l-6"></span>

CSS

body {
    font-family: Lucida Grande, Helvetica Neue, Helvetica, Arial, sans-serif;
    text-align: center;
    margin-top: 10%;
    font-size: 14px;
    color: #333;
}

em {
    display: block;
    margin: 0 auto;
}

[class*="l-"] {
    display: inline-block;
    background: #000;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    margin: 12px 2px;
    position: relative;
    -webkit-animation: loader 4s infinite;
    -webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -webkit-animation-fill-mode: both;
}

.l-1 { -webkit-animation-delay: 1s; }
.l-2 { -webkit-animation-delay: 0.8s; }
.l-3 { -webkit-animation-delay: 0.6s; }
.l-4 { -webkit-animation-delay: 0.4s; }
.l-5 { -webkit-animation-delay: 0.2s; }
.l-6 { -webkit-animation-delay: 0s; }

@-webkit-keyframes loader {
    0% { -webkit-transform: translateX(-30px); opacity: 0; }
    25% { opacity: 1; }
    50% { -webkit-transform: translateX(30px); opacity: 0; }
    100% { opacity: 0; }
}