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 id="circle5" class="circle"></div>
</div>

CSS

.circle {
    border-radius:45%;
    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:#993333;
    border-left-color:#993333;
    animation: spin 20s linear infinite;
    -webkit-animation: spin 20s linear infinite;
}
#circle3 {
    width:315px;
    height:315px;
    top:42px;
    left:42px;
    border-width: 16px;
    border-top-color:#111;
    border-left-color:#111;
    animation: spin 17s linear infinite;
    -webkit-animation: spin 17s linear infinite;
    z-index:7;
}
#circle2 {
    width:289px;
    height:289px;
    top:58px;
    left:58px;
    border-width: 13px;
    border-top-color:#CC3333;
    border-right-color:#CC3333;
    animation: spin 11s linear infinite;
    -webkit-animation: spin 11s linear infinite;
}
#circle1 {
    width:263px;
    height:263px;
    top:70px;
    left:70px;
    border-width: 14px;
    border-top-color:#990000;
    border-right-color:#990000;
    animation: spin 8s linear infinite;
    -webkit-animation: spin 8s linear infinite;
}
#circle0 {
    width:237px;
    height:237px;
    top:86px;
    left:86px;
    border-width: 11px;
    border-top-color:#CC3333;
    border-left-color:#CC3333;
    animation: spin 6s linear infinite;
    -webkit-animation: spin 6s linear infinite;
}
#circle {
    width:211px;
    height:211px;
    top:100px;
    left:100px;
    border-top-color: #cc4444;
    border-right-color:#cc4444;
    animation: spin 7s linear infinite;
    -webkit-animation: spin 7s linear infinite;
}
#allthethings {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform:...