Untitled

<div class="icon_progress" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="--value: 95;"></div>

<div class="icon_progress" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="--value: 94;"></div>

<div class="icon_progress" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="--value: 90;"></div>



<style>
.icon_progress{
	width: 80%;
	height: 80%;
	--percentage: var(--value);
	--primary: #00c2cb;
	--secondary: #fff;
	--size: 300px;
	animation: progress 2s .5s forwards;
	aspect-ratio: 1;
	border-radius: 50%;
	position: relative;
	overflow: hidden;
	display: grid!important;
	place-items: center;
}
.icon_progress:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: conic-gradient(var(--primary) calc(var(--percentage) * 1%),var(--secondary) 0);
	mask: radial-gradient(white 55%,transparent 0);
	mask-mode: alpha;
	-webkit-mask: radial-gradient(#0000 55%,#000 0);
	-webkit-mask-mode: alpha;
}
.icon_progress:after{
	counter-reset: percentage var(--value);
	content: counter(percentage) "%";
	font-family: inherit;
	font-size: 20px;
	font-family: 'Montserrat'!important;
	color: var(--primary);
}
@keyframes progress{
	0%{
		--percentage: 0;
	}
	 100%{
		--percentage: var(--value);
	}
}
@property --percentage{
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

</style>