@keyframes progress{0%{--percentage:0}to{--percentage:var(--value)}}@property --percentage{syntax:"<number>";inherits:true;initial-value:0}[role=progressbar]{--percentage:var(--value);--primary:#ffb400;--secondary:#d1d5db;--size:100px;animation:progress 2s .5s forwards;width:var(--size);aspect-ratio:1;border-radius:50%;position:relative;overflow:hidden;display:grid;place-items:center}[role=progressbar]: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(#fff 55%,transparent 0);mask-mode:alpha;-webkit-mask:radial-gradient(#0000 55%,#000 0);-webkit-mask-mode:alpha}[role=progressbar]:after{counter-reset:percentage var(--value);content:counter(percentage) "%";font-family:Helvetica,Arial,sans-serif;font-size:calc(var(--size) / 5);color:var(--primary)}