JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<script src="https://github.com/zachstronaut/jquery-css-transform/raw/master/jquery-css-transform.js"></script>
<script src="https://github.com/zachstronaut/jquery-animate-css-rotate-scale/raw/master/jquery-animate-css-rotate-scale.js"></script>
<div class="overlay"></div>
<div class="circle">
    <div class="bg"></div>
    <div class="clip left">
        <div class="fill"></div>
    </div>
    <div class="clip right">
        <div class="fill"></div>
    </div>
</div>

CSS

.overlay {
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.circle {
 width: 100px;
 height: 100px; 
 position:  absolute;
 top: 50%;
 left: 50%;
 margin: -50px 0 0 -50px;   
    -webkit-border-radius: 50%;
}
.circle .clip {
 width: 50px;
 height: 100px; 
 position: absolute;
 overflow: hidden;
}
.circle .clip.right {
 margin: 0 0 0 50px;
}
.circle .clip .fill {
background-color: #fbd005;
border-color: #fbd005;
position: absolute;
width: 100px;
height: 100px;
clip: rect(0px,100px,100px,50px);
border-radius: 50%;
}

.circle .clip.right .fill {
margin: 0 0 0 -100%;
clip: rect(0px,50px,100px,0px);
}
.circle .bg {
background-color: #ccc;
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;   
}

JavaScript

$(".clip.right .fill").animate({
    rotate: "+=180deg"
}, 500);
$(".clip.left .fill").delay(435).animate({
   rotate: "+=180deg"
}, 500);