JSFiddle - React, Tailwind, and code Playground
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 blink {
0% {
content: ".";
}
50% {
content: "..";
}
100% {
content: "...";
}
}
.loading::after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
text-align: left;
animation: blink 1s infinite;
}