JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.com/zachstronaut/jquery-animate-css-rotate-scale/raw/master/jquery-animate-css-rotate-scale.js"></script>
<script src="http://github.com/zachstronaut/jquery-css-transform/raw/master/jquery-css-transform.js"></script>
<button id='ajax'>Click me to do ajax stuff!</button>

<div id="wrapper">
    <div id="div1">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
        <div class="bar4"></div>
        <div class="bar5"></div>
        <div class="bar6"></div>
        <div class="bar7"></div>
        <div class="bar8"></div>
    </div>
</div>

CSS

/* position the bars and balls correctly (rotate them and translate them outward)*/
.bar1 {
    -moz-transform:rotate(0deg) translate(0, -40px);
    -webkit-transform:rotate(0deg) translate(0, -40px);opacity:0.12;
}
.bar2 {
    -moz-transform:rotate(45deg) translate(0, -40px);
    -webkit-transform:rotate(45deg) translate(0, -40px);opacity:0.25;
}
.bar3 {
    -moz-transform:rotate(90deg) translate(0, -40px);
    -webkit-transform:rotate(90deg) translate(0, -40px);opacity:0.37;
}
.bar4 {
    -moz-transform:rotate(135deg) translate(0, -40px);
    -webkit-transform:rotate(135deg) translate(0, -40px);opacity:0.50;
}
.bar5 {
    -moz-transform:rotate(180deg) translate(0, -40px);
    -webkit-transform:rotate(180deg) translate(0, -40px);opacity:0.62;
}
.bar6 {
    -moz-transform:rotate(225deg) translate(0, -40px);
    -webkit-transform:rotate(225deg) translate(0, -40px);opacity:0.75;
}
.bar7 {
    -moz-transform:rotate(270deg) translate(0, -40px);
    -webkit-transform:rotate(270deg) translate(0, -40px);opacity:0.87;
}
.bar8 {
    -moz-transform:rotate(315deg) translate(0, -40px);
    -webkit-transform:rotate(315deg) translate(0, -40px);opacity:1;
}

#div1 {
    -moz-transform:scale(0.5);
    -webkit-transform:scale(0.5);
    position: relative;
    width: 100px;
    height: 100px;
}

#div1 div {
    width:10px;
    height:30px;
    background: #fff;
    position:absolute;
    left: 45px;
    top: 35px;
}

#wrapper {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 10px;
    display: none;
    margin: 40px auto;
    width: 100px;
    height: 100px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

JavaScript

var spinner = $('#wrapper');

$('#ajax').click(function() {
    var count = 0,
        timeout = setInterval(function() {
            spinner.children('div').css({
                '-moz-transform': 'scale(0.5) rotate(' + count + 'deg)',
                '-webkit-transform': 'scale(0.5) rotate(' + count + 'deg)',
            });

            if (count == 360) {
                count = 0
            }
            count += 45;
        }, 100);

    spinner.fadeIn(300);
    this.disabled = 'true';

    $.ajax({
        url: '/echo/html/',
       
        success: function(data) {
            $('#ajax').text(data).attr('disabled', false);
            spinner.fadeOut(300, function(){
                clearInterval(timeout);
            });
        }
    });

    return false;
});