<progress max="100" value="70"></progress>
<progress value=".5"></progress>
<progress value=".2"></progress>
<progress max="1000" value="920"></progress>

@property --x {
  syntax: '<integer>';
  inherits: true;
  initial-value: 100; 
}
progress {
  width: 150px;
  height: 150px;
  appearance: none;
  position: relative;
  timeline-scope: --progress;
}
progress::-webkit-progress-bar {
  overflow: auto;
  visibility: hidden;
}
progress::-webkit-progress-value {
  view-timeline: --progress inline;
}
progress::before,
progress::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: x linear;
  animation-timeline: --progress;
  animation-range: entry 100% exit 100%;
}
progress::before {
  content: counter(val) "%";
  counter-reset: val var(--x);
  display: grid;
  place-content: center;
  font-family: system-ui,sans-serif;
  font-weight: 900;
  font-size: 1.8rem;
}
progress::after {
  content: "";
  background: color-mix(in hsl,#E80E0D,#7AB317 calc(1%*var(--x)));
  padding: round(15%,1px);
  border-radius: 50%;
  mask: 
    conic-gradient(#0000 0 0) subtract content-box,
    conic-gradient(#000 calc(1%*var(--x)),#0000 0);
}

@keyframes x {
  to {--x: 0}
}



body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  gap: 15px;
}