JSFiddle - React, Tailwind, and code Playground

by flek

HTML

<span id="loader">
    <span class="bright" />
    <span class="dark" />
</span>

CSS

#loader {
    position: relative;
    display: block;
    top: 100px;
    left: 100px;
    width: 18px;
    height: 18px;
    border-radius: 18px;
    background: #000;
}

#loader .bright {
    content: '';
    position: absolute;
    display: block;
    top: 9px;
    left: 9px;
    width: 0;
    height: 0;
    -webkit-animation-name:bright;
    -webkit-animation-duration:1s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -webkit-animation-delay:0;
    -webkit-animation-timing-function: ease-out;
}

#loader .dark {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    -webkit-animation-name:dark;
    -webkit-animation-duration:1s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -webkit-animation-delay:.5s;
    -webkit-animation-timing-function: ease-out;
}

@-webkit-keyframes bright {
    0% {      
        border-radius: 0;
        box-shadow: 0 0 0 0 #fff; }

    50% {   
        border-radius: 12px;
        box-shadow: 0 0 0 12px #fff; }

    100% {   
        border-radius: 12px;
        box-shadow: 0 0 0 12px #fff; }
}



@-webkit-keyframes dark {
    0% {      
        border-radius: 0;
        box-shadow: 0 0 0 0 #000;
        z-index: 1 }

    50% {   
        border-radius: 10px;
        box-shadow: 0 0 0 10px #000;
        opacity: 1        }

    51% {   
        opacity: 0 }

    100% {   
        border-radius: 10px;
        box-shadow: 0 0 0 10px #000;
        opacity: 0}
}