Conic Progress Rings

<div class="ring-row"><div class="ring" style="--p:75;--c:#ff477e"><span>75</span></div><div class="ring" style="--p:50;--c:#5b6cff"><span>50</span></div><div class="ring" style="--p:90;--c:#16a34a"><span>90</span></div></div>

body{background:#f6f7fa}
.ring-row{display:flex;gap:20px}
.ring{width:90px;height:90px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c) 0,var(--c) 0,#eceef3 0);position:relative;font-family:system-ui,sans-serif;animation:fill 1.4s ease forwards}
.ring::before{content:'';position:absolute;inset:10px;border-radius:50%;background:#f6f7fa}
.ring span{position:relative;font-weight:800;font-size:22px;color:#1a1f36}
.ring span::after{content:'%';font-size:13px}
@keyframes fill{to{background:conic-gradient(var(--c) calc(var(--p)*1%),#eceef3 0)}}

document.querySelectorAll('.ring').forEach(function(r){var p=+getComputedStyle(r).getPropertyValue('--p'),s=r.querySelector('span'),i=0;var t=setInterval(function(){i++;s.firstChild.textContent=i;if(i>=p)clearInterval(t)},1400/p)});