JSFiddle - React, Tailwind, and code Playground

by JordanBlount

HTML

<div class="main">
    <span class="dots">
        <span>Loading</span><span>…</span>
    </span>
</div>

CSS

@-webkit-keyframes dots1{
    0%{
        opacity:0.1;
}
100%{
    opacity: 1;    
}
}
@-webkit-keyframes dots2{
    0%{
        opacity:1;
}
100%{
    opacity: 0.1;    
}
}
.dots>*{
    display: inline-block;
    height: 20px;
    line-height: 20px;
}
.dots>*{
    position: relative;
    width: 0.4em;
    height: 0.4em;
    background: rgba(0,0,0,0.8);    
    display: inline-block;
    vertical-align: middle;
    -webkit-border-radius:0.2em;
    -moz-border-radius:0.2em;
    margin: 0 0.1em;
    vertical-align:middle;
    overflow: hidden;
    text-align: left;
    text-indent: -9000px;
    opacity: 0.1;
}
.dots>*,.dots>*+*{
    -webkit-transition-property:opacity;
    -webkit-animation-duration:1s;
    -webkit-animation-name:dots1;
    -webkit-animation-direction:alternate;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;        
}
.dots>*+*{
    opacity: 1;
    -webkit-animation-name:dots2;
}

/* ------------------ CONTAINER STYLES --------------------- */

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 100px;
    background:#333;
}
div {
    /* basic */
    background-color: #fff;
    margin: 0 auto;
    padding:100px;
    text-align: center;
    /* border-radius */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    /* box-shadow */
    -webkit-box-shadow: rgba(0,0,0,0.4) 0px 3px 40px 3px;
    -moz-box-shadow: rgba(0,0,0,0.4) 0px 3px 40px 3px;
    box-shadow: rgba(0,0,0,0.4) 0px 3px 40px 3px;
}