JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<div class="qLoader1 qLoader2" />

CSS

.qLoader2 {
    opacity: 0.45;
    border-right: none;
    border-top: none;
    border-left: none;
    z-index: 2000;
    background-color: transparent;
    transform: rotateZ(0);  
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

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