JSFiddle - React, Tailwind, and code Playground

by Mohammed Ismail Ansari

HTML

<div id="spinnerBkg"></div>
<div id="preloader-3">
<span id="circle"></span>
<span class="circle-small" id="circle-left"></span>
<span class="circle-small" id="circle-right"></span>
</div>

CSS

#preloader-3 {
    top: -20px;
    left: 0px;
    position: relative;
    animation: rotate 1s infinite linear;
    border: 5px solid rgba(255, 255, 255, 1);
    /*@monochromePaletteColor0 #ffffff alpha = 100%*/
    width: 12px;
    height: 12px;
    border-radius: 999px;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
}
#preloader-3 span#circle {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 12px;
    height: 12px;
    border: 5px solid rgba(121, 121, 121, .8);
    /*@monochromePaletteColor7 #797979 alpha = 80%*/
    border-top: 5px solid #fff;
    /*@monochromePaletteColor0 #ffffff alpha = 100%*/
    top: -5px;
    left: -5px;
    border-radius: 999px;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
}
#preloader-3 span.circle-small {
    position: absolute;
    width: 1px;
    height: 1px;
    border: 2px solid White;
    background-color: White;
    border-radius: 999px;
    top: -3px;
}
#preloader-3 span#circle-left {
    left: -2px;
}
#preloader-3 span#circle-right {
    left: 9px;
}
#spinnerBkg {
    left: 1px;
    top: 1px;
    width: 20px;
    height: 20px;
    position: relative;
    background: rgba(19, 19, 19, 0.8);
    /*@monochromePaletteColor10 #131313 alpha = 80%*/
    border-radius: 20px;
    -webkit-box-shadow: 0px 0px 0px 1px rgba(19, 19, 19, 0.8);
    /*@monochromePaletteColor10 #131313 alpha = 80%*/
    -moz-box-shadow: 0px 0px 0px 1px rgba(19, 19, 19, 0.8);
    /*@monochromePaletteColor10 #131313 alpha = 80%*/
    box-shadow: 0px 0px 0px 3px rgba(19, 19, 19, 0.8);
    /*@monochromePaletteColor10 #131313 alpha = 80%*/
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}