JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <div id="spin">
        <div class="div one"></div>
        <div class="div tho"></div>
        <div class="div three"></div>
        <div class="div four"></div>
    </div>
    <div id="butdiv">
        <button class="button"> <span>Click</span>

        </button>
    </div>
</div>

CSS

body {
     background:#232428;
     color: #fff;
     font-family:'Lato', Arial, sans-serif;
     font-size: 30px;
 }
 #wrap {
     width:250px;
     height:250px;
     background:#fff;
     margin:auto;
     border-radius:50%;
     margin-top:100px;
 }
 #spin {
     width:250px;
     height:250px;
     background:#fff;
     margin:auto;
     border-radius:50%;
     margin-top:100px;
 }
 #butdiv {
     width:250px;
     height:250px;
     position:absolute;
     margin-top:-287px;
 }
 .one {
     width:125px;
     height:125px;
     background:#7FC56F;
     float:left;
     border-top-left-radius:100%;
 }
 .tho {
     width:125px;
     height:125px;
     background:#01AFD9;
     float:left;
     border-top-right-radius:100%;
 }
 .three {
     width:125px;
     height:125px;
     background:#EB5539;
     float:left;
     border-bottom-left-radius:100%;
 }
 .four {
     width:125px;
     height:125px;
     background:#F5BA2A;
     float:left;
     border-bottom-right-radius:100%;
 }
 .button {
     width:40px;
     height:40px;
     background:#565758;
     outline: 0;
     border: 2px solid #FFFEFE;
     border-top-left-radius:100px;
     border-top-right-radius:2px;
     border-bottom-left-radius:100px;
     border-bottom-right-radius:100px;
     transform: rotate(-45deg);
     z-index:100;
     position:absolute;
     left: 50%;
     margin-left: -20px;
     top: 50%;
     margin-top: 20px;
 }
 .anime {
     transition: all 5s cubic-bezier(10, .99, .44, 6.99);
     -webkit-animation: spin 1.25s infinite linear forwards;
     animation: spin 1.25s infinite linear forwards;
 }
 @-ms-keyframes spin {
     from {
         -ms-transform: rotate(0deg);
     }
     to {
         -ms-transform: rotate(360deg);
     }
 }
 @-moz-keyframes spin {
     from {
         -moz-transform: rotate(0deg);
     }
     to {
         -moz-transform: rotate(360deg);
     }
 }
 @-webkit-keyframes spin {
     from {
         -webkit-transform: rotate(0deg);
     }
     to {
        ...

JavaScript

$(function () {
    var circle = $('#spin'),
        timer;
    circle.addClass('anime').css('animationPlayState', 'paused');
    $('.button').on('click', function () {
        var rTime = Math.floor(Math.random() * 5001) + 1000;
        if (circle.css('animationPlayState') === 'paused') {
            circle.css('animationPlayState', 'running');
            timer = setTimeout(function () {
                circle.css('animationPlayState', 'paused');
            }, rTime);
        } else {
            circle.css('animationPlayState', 'paused');
            clearTimeout(timer);
        }

    });
});