JSFiddle - React, Tailwind, and code Playground

by Bacher

HTML

<div style="position: relative; background: #7b7; width: 100px; height: 100px;">
    
    <div id="icon">
        <div class="d half1"></div>
        
        <div class="d r0 w"></div>
        
        <div class="d half2"></div>
    
        <div class="d r1 w"></div>
        <div class="d r2 w"></div>
        <div class="d r3 w"></div>
        <div class="d r4 w"></div>
        <div class="d r5 w"></div>
        <div class="d r6 w"></div>
    
        <div class="d r7 w"></div>
        <div class="d r8 w"></div>
        <div class="d r9 w"></div>
        <div class="d r10 w"></div>
        <div class="d r11 w"></div>
        <div class="d r12 w"></div>
    </div>           
</div>

CSS

#icon {
    position: relative;
    -webkit-transition: -webkit-transform 10s;
    -webkit-transform: rotate(5400deg);
    -webkit-transform-origin: 32px 32px;
    -webkit-transition-timing-function: linear;
}

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

.half1 {
    border-top-color: black;
    border-right-color: black;
    -webkit-transform: rotate(45deg);
}

.half2 {
    border-bottom-color: black;
    border-left-color: black;
    -webkit-transform: rotate(45deg);
}



.b-all { border-color: black; }

.b { border-top-color: black; }
.w { border-top-color: white; }

.r0  { -webkit-transform: rotate(22deg);  }
.r1  { -webkit-transform: rotate(45deg);  }
.r2  { -webkit-transform: rotate(67deg);  }
.r3  { -webkit-transform: rotate(90deg);  }
.r4  { -webkit-transform: rotate(112deg); }
.r5  { -webkit-transform: rotate(135deg); }
.r6  { -webkit-transform: rotate(157deg); }
.r7  { -webkit-transform: rotate(180deg); }
.r8  { -webkit-transform: rotate(202deg); }
.r9  { -webkit-transform: rotate(225deg); }
.r10 { -webkit-transform: rotate(247deg); }
.r11 { -webkit-transform: rotate(270deg); }
.r12 { -webkit-transform: rotate(292deg); }
.r13 { -webkit-transform: rotate(315deg); }
.r14 { -webkit-transform: rotate(337deg); }

.r0 { opacity: 1; }
.r1 { opacity: .45; }
.r2 { opacity: .4; }
.r3 { opacity: .37; }
.r4 { opacity: .35; }
.r5 { opacity: .30; }
.r6 { opacity: .25; }
.r7 { opacity: .20; }
.r8 { opacity: .15; }
.r9 { opacity: .12; }
.r10 { opacity: .10; }
.r11 { opacity: .10; }
.r12 { opacity: .10; }