JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Loading">
    <div id="Text">Loading</div>
    <div id="dotContainer">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
</div>

CSS

body { background: black; }
#Loading #Text { color: White; font-family: "Segoe UI"; font-size: 3em; width: 200px; margin-left: auto; margin-right: auto; text-align: center; }
#Loading #dotContainer {position: relative; width: 100%; height: 100%; overflow:hidden; height: 10px; }
#Loading #dotContainer .dot {position: absolute; top: 0; width: 10px; height: 10px; margin-left: -5px; background-color: #0099FF; left: 0; }

JavaScript

$(document).ready(function() {
    $(".dot").each(function(index) {
        moveDot(this, index);
    });
});

function moveDot(dotItem, delay) {
    var dotItem = $(dotItem);
    dotItem.delay(delay * 200).css('left', '0%').animate({left: '50%'}, 1000, 'easeOutCirc',  function() {
        dotItem.animate({left : '100%'}, 1000, 'easeInCirc', function () {
            moveDot(dotItem[0], 0);
        });
    });
}