JSFiddle - React, Tailwind, and code Playground

by swoogie

HTML

<div class="spinner-circle"></div>

CSS

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    0%{
        -webkit-transform: rotate(0deg);
        border-color: red;
    }    
    50% {
         -webkit-transform: rotate(180deg);
        border-color: green;
    }
    100% {
        -webkit-transform: rotate(360deg);
        border-color: red;

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



body {
    background-color: #fff;
}

.spinner-circle {
    border: 3px solid red;
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 200px;
    -webkit-animation:spin 12000ms linear infinite;
    -moz-animation:spin 12000ms linear infinite;
    animation:spin 12000ms linear infinite; 
    margin-bottom: 10px;
}
.spinner-circle:after {
    content: "--------------------";
    position: absolute;
    top: 90px;
    left: 90px;
}
.spinner-circle:before {
    content: "----------------";
    position: absolute;
    top: 90px;
    left: 50px;
     -webkit-animation:spin 1000ms linear infinite;
    -moz-animation:spin 10000ms linear infinite;
    animation:spin 1000ms linear infinite; 
     }