JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="superCircle">
    <div class="superSemi top"></div>

    <div class="rotatingSemi top"></div>
    <div class="rotatingSemi bottom"></div>
</div>

CSS

@-webkit-keyframes rotaterTop {
    0% { -webkit-transform: rotateZ(0); z-index: 0; }
    50% { z-index: ; }
    100% { -webkit-transform: rotateZ(360deg); z-index: ; }
}

@-webkit-keyframes rotaterBot {
    0% { -webkit-transform: rotateZ(0); z-index: ; }
    50% { z-index: ; }
    100% { -webkit-transform: rotateZ(360deg); z-index: ; }
}

.superCircle {
    position: relative;
    z-index: 1;
    background: blue;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
}

.superCircle > .semi {
    position: relative;
    height: 50%;
    background: blue;
    z-index: 1;
}



.rotatingSemi {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #ddd;
}

.rotatingSemi.top {
    -webkit-animation: rotateTop 0.8s;
    -webkit-transform-origin: 50% 100%;
}

.rotaterCircle > .bottom {
    -webkit-animation: rotaterBot 0.8s;
    -webkit-transform-origin: 50% 0;
}