@keyframes progress{0%{--percentage:0}to{--percentage:var(--value)}}@property --percentage{syntax:"<number>";inherits:true;initial-value:0}[role=progressbar]{--percentage:var(--value);--primary:#f0793a;--secondary:#101326;--size:180px;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(var(--primary) calc(var(--percentage)*1%),var(--secondary) 0);content:"";height:100%;left:0;mask:radial-gradient(#fff 55%,transparent 0);mask-mode:alpha;-webkit-mask:radial-gradient(#0000 55%,#000 0);-webkit-mask-mode:alpha;position:absolute;top:0;width:100%}[role=progressbar]:after{color:#fff;content:counter(percentage) "%";counter-reset:percentage var(--value);font-family:Verdana,sans-serif;font-size:calc(var(--size)/5);font-weight:700}.stat-init-grid-2{background-color:rgba(31,39,73,.5);border-radius:20px;display:block;height:400px;padding:20px}.progressbar-text{margin-top:20px}.progressbar-actual{display:flex;justify-content:center}p{color:#fff;font-family:verdana;font-size:16px}