JSFiddle - React, Tailwind, and code Playground

by swoogie

HTML

<div class="spinner"> </div><div class="spinner spinner-fast"></div><div class="spinner spinner-slow"></div><div class="spinner spinner-slower"></div>

CSS

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.spinner{
    position:absolute;
/*     border-bottom: 3px solid black;
    border-top: 3px solid black; */ 
    border-left: 3px solid #0179c4;
    border-right: 3px solid #0179c4;
    width: 40px;
    height: 40px;
    //border-radius: 20px;
    display:inline-block;
    -webkit-animation:spin 1000ms linear infinite;
    -moz-animation:spin 1000ms linear infinite;
    animation:spin 1000ms linear infinite; 
}

.spinner-fast{
    -webkit-animation:spin 1050ms linear infinite;
    -moz-animation:spin 1050ms linear infinite;
    animation:spin 1050ms linear infinite; 
}
.spinner-slow{
    -webkit-animation:spin 950ms linear infinite;
    -moz-animation:spin 950ms linear infinite;
    animation:spin 950ms linear infinite; 
}
.spinner-slower{
    -webkit-animation:spin 900ms linear infinite;
    -moz-animation:spin 900ms linear infinite;
    animation:spin 900ms linear infinite; 
}