【jQuery】スクロール量とページの高さを取得して円グラフで残量を表示

<div class="circle-graf"></div>

.circle-graf{
	width:200px;
	height:200px;
	border-radius:50%;
}

$(function() {
	$(window).scroll(function(){
		var bodyHeight = $('body').height(); 
		var windowHeight = $(window).height();
		var windowScroll = $(window).scrollTop(); 
		var calcPercentage = (windowScroll / (bodyHeight - windowHeight)) * 100; 
		var totalPercentage = Math.round(calcPercentage);
		$(".circle-graf").css({
			'background-image' :
			'conic-gradient(#66ff99 0% '+totalPercentage+'%, #ccc '+totalPercentage+'% 100%)'});
		});
});

<div class="circle-graf"><span><i class="fas fa-caret-up"></i></span></div>

.circle-graf{
	width:200px;
	height:200px;
	border-radius:50%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
.circle-graf span{
	display:block;
	width:180px;
	height:180px;
	border-radius:50%;
	background-color:#fff;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
.circle-graf span　i{
	font-size:120px;
	line-height:1;
	margin-top:-15px;
}

$(function() {
	$(window).scroll(function(){
		var bodyHeight = $('body').height(); 
		var windowHeight = window.innerHeight;
		var windowScroll = $(window).scrollTop(); 
		var calcPercentage = (windowScroll / (bodyHeight - windowHeight)) * 100; 
		var totalPercentage = Math.round(calcPercentage);
		$(".circle-graf").css({
			'background-image' :
			'conic-gradient(#66ff99 0% '+totalPercentage+'%, #ccc '+totalPercentage+'% 100%)'});
		});
});