JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
			<div class="left-cov"></div>
			<div class="right-cov"></div>
			<div class="inner">
				<p class="fy-rate">1</p>
			</div>
		</div>

CSS

*{float:left;margin:0px;padding:0px;}
.outer{border-radius:50%;background-color:red;width:220px;height:220px;position:relative;margin:20px;overflow:hidden}
.inner{border-radius: 50%;background-color:yellow;width:180px;height:180px;position:relative;top:20px;left:20px;}
.left-cov{height:100%;width:50%;position:absolute;top:0px;left:0px;background-color:grey}
.right-cov{height:100%;width:50%;background-color:blue;position:absolute;top:0px;left:0px;}
.fy-rate{font-size:52px;width:100%;text-align:center;margin-top:45px;}

JavaScript

$(function(){
				window.mark=$('.fy-rate').text();
				window.org=parseFloat(mark);
				org*=40;
				if(org<=100){
					//alert(org);
					$('.right-cov').css({'height':+(100-org)+'%'})
				}
				else{
					//alert(org);
					$('.right-cov').css({'height':'0%'});
					$('.left-cov').css({'height':+(200-org)+'%'})
				}
			});