JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<div class="qLoader2"></div>

CSS

.qLoader2 {
    border: 4px solid blue;
    width: 10vw;
    height: 10vw;
    width: 72px;
    height: 72px;
    position: absolute;
    top: 12vh;
    right: 45vw;
    left: 45vw;
    background: white;
    opacity: 0.45;
    border-right: none;
    border-top: none;
    border-left: none;
    z-index: 2000;
    background-color: transparent;
    border-radius: 100%;
    transform: rotateZ(0);  
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

/* @-moz-keyframes spin {  . . . } */
/* @-ms-keyframes spin {  . . . } */
/* @-o-keyframes spin { . . . } */
@-webkit-keyframes spin { 
    from {
        transform: rotateZ(0deg) scale(1); 
    }
    50% {
        transform: rotateZ(540deg) scale(0.9);    
        border-color: #0099ff;
    }
    to {
        transform: rotateZ(1080deg) scale(1);
    }
}
@keyframes spin { 
    from {
        transform: rotateZ(0deg) scale(1); 
    }
    50% {
        transform: rotateZ(540deg) scale(0.9);    
        border-color: #0099ff;
    }
    to {
        transform: rotateZ(1080deg) scale(1);
    }
}