JSFiddle - React, Tailwind, and code Playground

HTML

<div class="loading">Loading<div class="dot one"></div><div class="dot two"></div><div class="dot three"></div></div>

CSS

body {
    padding: 25px;
    font-size: 16px;
    font-family: Arial,Helvetica;
}

.loading {
     line-height: 20px;        
}

.dot {
    font-size: 10px;
    animation: dot 1.3s infinite;
    width: 25px;
}

.one {
    animation-delay: 0.0s;
}

.two {
    animation-delay: 0.2s;
}

.three {
    animation-delay: 0.3s;
}

@keyframes dot {
      0% { font-size: 10px; }
     50% { font-size: 11px; }
    100% { font-size: 18px; }
}