JSFiddle - React, Tailwind, and code Playground

by feklee

HTML

<script src="http://fonts.googleapis.com/css?family=Roboto:700"></script>
<div class="loading">Loading</div>

CSS

body {
    font-family: 'Roboto', sans-serif; 
    text-align: center;
    font-size: 50px;
}

@keyframes ellipsis {
    from {
        width: 0;
        margin-right: 0;
    }
    to {
        width: 40px;
        margin-right: -40px;
    }
}

.loading::after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    text-align: left;
    animation: ellipsis 1s infinite steps(4);
    content: "…";
}