JSFiddle - React, Tailwind, and code Playground

by Ариан Шапиро

HTML

<div id="allthethings">
    <div id="circle" class="circle"></div>
    <div id="circle0" class="circle"></div>
    <div id="circle1" class="circle"></div>
    <div id="circle2" class="circle"></div>
    <div id="circle3" class="circle"></div>
    <div id="circle4" class="circle"></div>
</div>

CSS

.circle {
    border-radius:50%;
    border: 10px solid black;
    border-top-color:transparent;
    border-left-color:transparent;
    border-bottom-color:transparent;
    border-right-color:transparent;
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
    position: absolute;
}
#circle4 {
    width:341px;
    height:341px;
    top:35px;
    left:35px;
    border-top-color:#3498db;
    animation: spin 12s linear infinite;
    -webkit-animation: spin 12s linear infinite;
}
#circle3 {
    width:315px;
    height:315px;
    top:48px;
    left:48px;
    border-top-color:#e74c3c;
    animation: spin 6s linear infinite;
    -webkit-animation: spin 6s linear infinite;
}
#circle2 {
    width:289px;
    height:289px;
    top:61px;
    left:61px;
    border-top-color:#f9c922;
    animation: spin 3s linear infinite;
    -webkit-animation: spin 3s linear infinite;
}
#circle1 {
    width:263px;
    height:263px;
    top:74px;
    left:74px;
    border-top-color:#af25d8;
    animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite;
}
#circle0 {
    width:237px;
    height:237px;
    top:87px;
    left:87px;
    border-top-color:#66d825;
    animation: spin 1.5s linear infinite;
    -webkit-animation: spin 1.5s linear infinite;
}
#circle {
    width:211px;
    height:211px;
    top:100px;
    left:100px;
    border-top-color: #b7b7bc;
    animation: spin 1s linear infinite;
    -webkit-animation: spin 1s linear infinite;
}
#allthethings {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color:#222;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
       ...