JSFiddle - React, Tailwind, and code Playground

by A Wells

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<body>
    <div id="busy" style="height: 80px; width: 80px; position: relative;"></div>
    <div id="circle" class="circle" style="height: 50px; width: 50px;">
    </div>
</body>

CSS

.circle {
    border-radius: 50%; background: -moz-radial-gradient(center, ellipse cover, rgba(30,87,153,0.75) 0%, rgba(125,185,232,0.5) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,0.75) 0%,rgba(125,185,232,0.5) 100%); /* Chrome10+,Safari5.1+ */
}

JavaScript

jQuery(document).ready(function() {
    var busy_size = {
        'width': $('#busy').width(),
        'height': $('#busy').height()
    };
    var circle_size = {
        'width': 2*Math.round(busy_size.width/2*0.16), // make it even
        'height': 2*Math.round(busy_size.height/2*0.16) // make it even
    };
    var avail_size = {
        'width': busy_size.width - circle_size.width,
        'height': busy_size.height - circle_size.height,
    };
    for(var i = 0; i < 12; i++) {
        var left = Math.round(Math.cos(Math.PI*2*(i+1)/12)*(avail_size.width / 2) + (avail_size.width / 2));
        var top = Math.round(-Math.sin(Math.PI*2*(i+1)/12)*(avail_size.height / 2) + (avail_size.height /2));
        $('#circle').clone().css('position', 'absolute').css('width', circle_size.width + 'px').css('height', circle_size.height + 'px').css('top', top + 'px').css('left', left + 'px').hide().appendTo('#busy');
    };
    var cur_child = 1;//undefined;//$('#busy :first-child');
    setInterval((function(){ var cur_child = 1; return function() {
        if (cur_child > $('#busy').children().length) {
            cur_child = 1;//$('#busy :first-child');
        }
        $("#busy :nth-child(" + cur_child.toString() + ")").show().effect("fade", 550);
        cur_child += 1;
    };})(), 100);
});