<!doctype html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#0f0f10;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.stage{position:absolute;inset:0;display:grid;place-items:center;container-type:size}
.w{position:relative;width:28cqw;height:28cqw}svg{width:100%;height:100%;transform:rotate(-90deg)}
.tr{fill:none;stroke:#2a2a2c;stroke-width:10}.pr{fill:none;stroke:#f5b942;stroke-width:10;stroke-linecap:round;stroke-dasharray:251.3;stroke-dashoffset:251.3}
.n{position:absolute;inset:0;display:grid;place-items:center;color:#f5efe6;font-weight:800;font-size:6cqw;font-variant-numeric:tabular-nums}
</style></head>
<body><div class="stage"><div class="w"><svg viewBox="0 0 100 100"><circle class="tr" cx="50" cy="50" r="40"/><circle class="pr" id="p" cx="50" cy="50" r="40"/></svg><div class="n" id="n">0%</div></div></div><script>var p=document.getElementById("p"),n=document.getElementById("n"),L=251.3,T=.72,D=4000,t0=performance.now();function e(t){return 1-Math.pow(1-t,3)}function f(now){var k=((now-t0)%D)/D,v;if(k<.4)v=e(k/.4)*T;else if(k<.85)v=T;else v=T*(1-(k-.85)/.15);p.style.strokeDashoffset=L*(1-v);n.textContent=Math.round(v*100)+"%";requestAnimationFrame(f)}requestAnimationFrame(f);</script></body></html>