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

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

.progressbar[role="progressbar"] {
  --size: 4px;
  --fg: black;
  --bg: black;
  --pgPercentage: var(--value);
  animation: growProgressBar 1s 1 forwards;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  background: radial-gradient(farthest-side, #0000 calc(100% - var(--size)),var(--bg) 0);
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(var(--size) );
  color: var(--fg);
}

.progressbar[role="progressbar"]::after {
  content:"";
  grid-area: 1/1;
  border-radius: 50%;
  padding: var(--size);
  background:#EC2427;
  --_m: 
    conic-gradient(#000 calc(var(--pgPercentage) * 1%), #0000 0),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
}

.progressbar[role="progressbar"]::before {

  content: var(--textInside);
  grid-area: 1/1;
  margin: auto;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}