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

.pie {
    --percent: 20;
    --border: 22px;
    --color: darkred;
    --width: 150px;
    width: var(--width);
    aspect-ratio: 1;
    position: relative;
    display: inline-grid;
    margin: 5px;
    place-content: center;
    font-size: 25px;
    font-weight: bold;
}

.pie:before,
.pie:after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.pie:before {
    inset: 0;
    background: radial-gradient(farthest-side, var(--color) 98%, #0000) top/var(--border) var(--border) no-repeat, conic-gradient(var(--color) calc(var(--percent)*1%), #0000 0);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--border)), #000 calc(100% - var(--border)));
    mask: radial-gradient(farthest-side, #0000 calc(99% - var(--border)), #000 calc(100% - var(--border)));
}

.pie:after {
    inset: calc(50% - var(--border)/2);
    background: var(--color);
    transform: rotate(calc(var(--percent)*3.6deg)) translateY(calc(50% - var(--width)/2));
}

.animate {
    animation: p 1s .5s both;
}

.no-round:before {
    background-size: 0 0, auto;
}

.no-round:after {
    content: none;
}

@keyframes p {
    from {
        --percent: 0
    }
}