JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="content">  </div>
</body>

CSS

body {
    background-color:#e8e8e8;
}

JavaScript

var loadAnimation = function ( container, small ) {
    if(small){
        var base = 4;
    } else {
        base = 8;
    }
    
    $div = $('<div id="loadingConatiner"><div></div><div></div><div></div></div>')
        .appendTo( container )
        .css({ 'width': (base*3+12)+'px', 
               'height': (base*3+4)+'px', 
               'margin': '10px auto', 
               'position':'relative', 
               'padding':(3*base/2)+'px 0' });
    $div.find('div')
        .css({ 'height': (base*3)+'px', 
               'width': base+'px', 
               'border':'2px solid #333', 
               'position':'absolute', 
               'top':'0px', 
               'background-color':'#808080', 
               'float':'left', 
               'opacity':.5 }); 
    var grow = function( $el ) {
        $el.animate({'opacity':1, 
                     'top':'-='+(3*base/2)+'px',
                     'left':'-='+(base/2)+'px',
                     'width':'+='+(base)+'px',
                     'height':'+='+(3*base)+'px'},
                    500, 
                    function(){ $el.animate({'opacity':.5,
                     'top':'+='+(3*base/2)+'px',
                     'left':'+='+(base/2)+'px',
                     'width':'-='+(base)+'px',
                     'height':'-='+(3*base)+'px'},
                    500); }); 
    }, i ,
    startAnimation = function(){
        i = 0;
        $div.find('div').each(function(){
            var $this = $(this).css({'left':(20*i)+'px'});
            setTimeout( function(){ grow($this); }, 250*i );
            i++;
        });
    };
    
    
    startAnimation();
   // setInterval(startAnimation,2000);

    return function(){
        $div.find('div').stop();
        $div.stop().remove();
    }
}
    
loadAnimation(document.getElementById('content'))