JSFiddle - React, Tailwind, and code Playground

HTML

<div id='loader'>
    <div id='loaderLargeSlice' class='loaderSlice'>
        <div class='arc'></div>
        <div class='arc'></div>
        <div class='arc'></div>
    </div>
</div>

CSS

#loader{    
    position: relative;
    width: 100px; 
    height: 100px;
    margin: 14px;
    border-radius: 50%;
    background: none;
}

.loaderSlice
{
    position:absolute;
    display:block;
    
    opacity: 0.5;
}

#loaderLargeSlice
{
    height: 100px;
    width: 100px;
    
    animation: spin 4s linear 0s infinite forwards;
    -webkit-animation: spin 4s linear 0s infinite forwards;
}

.arc
{
    position: absolute;
    top: -14px;
    left: -14px;
    width: 100%;
    height: 100%;
    background: none;
    border: 14px solid rgba(0,0,0,0);
    border-top-color: black;
    border-radius: 50%;
}

.arc + .arc
{
    transform: rotate(70deg);
    -webkit-transform: rotate(70deg);
}

.arc + .arc + .arc
{    
    transform: rotate(140deg);
    -webkit-transform: rotate(140deg);
}