JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66">
     <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>

CSS

@-webkit-keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}
@keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}
@-webkit-keyframes colors {
    0% {
        stroke: #4285F4;
    }
    25% {
        stroke: #4285F4;
    }
    50% {
        stroke: #4285F4;
    }
    75% {
        stroke: #4285F4;
    }
    100% {
        stroke: #4285F4;
    }
}
@keyframes colors {
    0% {
        stroke: #4285F4;
    }
    25% {
        stroke: #4285F4;
    }
    50% {
        stroke: #4285F4;
    }
    75% {
        stroke: #4285F4;
    }
    100% {
        stroke: #4285F4;
    }
}
@-webkit-keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }
    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}
@keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }
    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}
.spinner {
    -webkit-animation: rotator 1.4s linear infinite;
    animation: rotator 1.4s linear infinite;
}
.path {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    fill: -ms-input-placeholder;
    fill: -webkit-input-placeholde;
    -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
    animation: dash 1.4s ease-in-out infinite, colors 5.6s...