JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<i class="loading-circle"></i>

SCSS

i.loading-circle {
    $size: 50px;
    position: absolute;
    width: $size;
    height: $size;
    border-radius: $size;
    border: 10px dashed #fbac2a;
    animation: middle 1.5s linear infinite;
    
    &::before, &::after {
        width: $size;
        height: $size;
        content: "";
        display: block;
        border-radius: $size;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    //Ripples
    &::before {
        box-shadow: 0 0 0 5px #fbac2a;
        animation: ripples 1s ease infinite;
    }
    
    //Blue thing
    &::after {
        background: #3b6e98;
        background: radial-gradient(#3b6e98 50%, #000);
        box-shadow: 0 0 0 5px #fbac2a;
        animation: bluething 1s ease infinite;
    }
}

@keyframes middle {
    100% {
        transform: rotateZ(360deg);
    }
}

@keyframes ripples {
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes bluething {
    20% {
        transform: scale(1.2);
        box-shadow: 0 0 0 2px #fbac2a; 
    }
    90% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}