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

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

function sinh(aValue) {
    var myTerm1 = Math.pow(Math.E, aValue);
    var myTerm2 = Math.pow(Math.E, -aValue);
    return (myTerm1-myTerm2)/2;
} 

$.easing.speedInOut = function(x, t, b, c, d) {
    return (sinh((x - 0.5) * 5) + sinh(-(x - 0.5)) + (sinh(2.5) + Math.sin(-2.5))) / (sinh(2.5) * 1.82);
}; 

function moveDot(dotItem, delay) {
    if (loading){
        dotItem.delay(delay * 200).css('left', '0%').animate({left: '100%'}, 2000, 'speedInOut',  function() {                  moveDot(dotItem, 0);
        });
    }
}