JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<main>
<div class="spin">
    <span></span><span></span><span></span><span></span><span></span>    
    <span></span><span></span><span></span><span></span><span></span>
    <span></span><span></span><span></span><span></span><span></span>
    <span></span><span></span><span></span><span></span><span></span>
</div>
</main>

SCSS

* {
    box-sizing: border-box;
    margin: 0;
}

html, body, main {
    height: 100%;
}
main {
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spin {
    width: 80vmin;
    height: 80vmin;
    text-align: center;
    position: relative;

    span {
        height: 100%;
        position: absolute;
        top: 0;
        animation: spin 60s linear infinite;
        
        &::before {
            content: '⬤';
            font-size: 10px;
        }
    }
    
    @for $i from 0 to 20 {
        span:nth-child(#{$i+1}) {
            top: $i * 2%;
            height: (100% - $i * 4%);
            animation-duration: 60s / (21 - $i);
            color: adjust-hue(red, $i*18);
        }
    }
}