JSFiddle - React, Tailwind, and code Playground

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="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

.circle {
 width: 140px;
 height: 140px;  
    position:relative;
}
.circle .clip {
 width: 70px;
 height: 140px; 
 position: absolute;
 overflow: hidden;
}
.circle .clip.right {
 margin: 0 0 0 70px;
 xbackground: green;
}
.circle .clip .fill {
background-color: red;
border-color: red;
position: absolute;
width: 140px;
height: 140px;
clip: rect(0px,140,140px,70px);
border-radius: 70px;
}

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

JavaScript

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