@keyframes growProgressBar {
    0%, 33% { --pgPercentage: 0; }
    100% { --pgPercentage: var(--value); }
}

@property --pgPercentage {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

div[role="progressbar"] {
    --size: 16rem;
    --fg: #f87f0e;
    --bg: #e7ebf7;
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, white 95%, transparent 0 99.9%, white 0),
        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0)
;

    /*font-size: calc(var(--size) / 5);*/
    /*color: var(--fg);*/
}

/*div[role="progressbar"]::before {*/
/*    counter-reset: percentage var(--value);*/
/*    content: counter(percentage) '%';*/
/*}*/

/* demo */