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;
    -webkit-animation: dot 1.3s infinite;
    width: 25px;
}

.one {
    -webkit-animation-delay: 0.0s;
    display:inline;        
}

.two {
    -webkit-animation-delay: 0.2s;
    display:inline;
}

.three {
    -webkit-animation-delay: 0.3s;
    display:inline;
}

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