@keyframes progress{0%{--percentage:0}to{--percentage:var(--value)}}@property --percentage{syntax:"<number>";inherits:true;initial-value:0}[role=progressbar]{--percentage:var(--value);--primary:#369;--secondary:#adf;--size:150px;animation:progress 2s .5s forwards;aspect-ratio:1;border-radius:50%;display:grid;overflow:hidden;place-items:center;position:relative;width:var(--size)}[role=progressbar]:before{background:conic-gradient(#3ed226 calc(var(--percentage)*1%),#fff 0);content:"";height:100%;left:0;mask:radial-gradient(#fff 55%,transparent 0);mask-mode:alpha;-webkit-mask:radial-gradient(#0000 65%,#000 0);-webkit-mask-mode:alpha;position:absolute;top:0;width:100%}[role=progressbar]:after{color:#fff;counter-reset:percentage var(--value);font-family:Helvetica,Arial,sans-serif;font-size:calc(var(--size)/5)}