JSFiddle - React, Tailwind, and code Playground

by Bacher

HTML

<div class="container">
    <div class="icon">
        <div class="d r0"></div>
        <div class="d r15"></div>
        <div class="d r14"></div>
        <div class="d r13"></div>
        <div class="d r12"></div>
        <div class="d r11"></div>
        <div class="d r10"></div>
        <div class="d r9"></div>
        <div class="d r8"></div>
        <div class="d r7"></div>
        <div class="d r6"></div>
        <div class="d r5"></div>
        <div class="d r4"></div>
        <div class="d r3"></div>
        <div class="d r2"></div>
        <div class="d r1"></div>
    </div>
</div>

<br />
<button id="cmd">cmd</button>

CSS

.container {
    position: relative;
    background: #5b5;
    width: 24px;
    height: 24px;
    padding: 4px;
}

.icon {
    position: relative;
    -webkit-transform-origin: 12px 12px;
    -webkit-animation: rotation .7s linear infinite;
}

@-webkit-keyframes rotation {
    from { -webkit-transform: rotate(360deg); }
    to   { -webkit-transform: rotate(0deg); }
}

.d {
    position: absolute;
    width: 16px;
    height: 16px;
    border-width: 4px;
    border-style: solid;
    border-radius: 40px;
    border-color: transparent;
}

.r0  { -webkit-transform: rotate(22deg);  border-top-color: #fff; }
.r1  { -webkit-transform: rotate(45deg);  border-top-color: #eee; }
.r2  { -webkit-transform: rotate(67deg);  border-top-color: #ddd; }
.r3  { -webkit-transform: rotate(90deg);  border-top-color: #ccc; }
.r4  { -webkit-transform: rotate(112deg); border-top-color: #bbb; }
.r5  { -webkit-transform: rotate(135deg); border-top-color: #aaa; }
.r6  { -webkit-transform: rotate(157deg); border-top-color: #999; }
.r7  { -webkit-transform: rotate(180deg); border-top-color: #888; }
.r8  { -webkit-transform: rotate(202deg); border-top-color: #777; }
.r9  { -webkit-transform: rotate(225deg); border-top-color: #666; }
.r10 { -webkit-transform: rotate(247deg); border-top-color: #555; }
.r11 { -webkit-transform: rotate(270deg); border-top-color: #444; }
.r12 { -webkit-transform: rotate(292deg); border-top-color: #333; }
.r13 { -webkit-transform: rotate(315deg); border-top-color: #222; }
.r14 { -webkit-transform: rotate(337deg); border-top-color: #111; }
.r15 { -webkit-transform: rotate(360deg); border-top-color: #000; }

JavaScript

document.getElementById("cmd").onclick = function() {
    var div = document.getElementsByTagName("div")[0];
    
    if(div.style["-webkit-animation"] !== undefined) alert("webkit");
    if(div.style["-ms-animation"] !== undefined) alert("ms");
    if(div.style["animation"] !== undefined) alert("pure");
};