JSFiddle - React, Tailwind, and code Playground

HTML

<div class="loading"></div>

CSS

.load-circle {
    padding:8px;
    background:#666;
    border-radius: 10px;
    display:inline-block;
    margin:8px;
}
.loading {
 margin:10px;
 padding:10px;
}

JavaScript

drawLoader(3, $('.loading'));

function drawLoader(n, element) {
    //draw loading circles
    for (i=0; i<n; i++) {
        $(element).append('<div class="load-circle" />');
    }
    //for each start a blink action with apropriate time lag
    $.each(jQuery('.load-circle'), function(index, item){
        setTimeout(function(){
            blinker.call(item, true);    
        }, index*400);
    });
}

function blinker(dir){
    //needed for recursive calls
    //knowing in which direction
    if(dir) {
        $(this).animate({opacity: 0.25}, 800, function(){
            blinker.call($(this), !dir);
        })    
     } else {
         $(this).animate({opacity: 1}, 800, function(){
            blinker.call($(this), !dir);
        })     
     }
}