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

@property --x {
  syntax: '<integer>';
  inherits: true;
  initial-value: 100; 
}
@property --y {
  syntax: '<number>';
  inherits: true;
  initial-value: 1; 
}
progress {
  width: 200px;
  height: 40px;
  appearance: none;
  position: relative;
  animation: 
    x linear,
    y 2s .5s both;
  animation-timeline: --progress,auto;
  timeline-scope: --progress;
  animation-range: entry 100% exit 100%;
  --_c: color-mix(in hsl,#E80E0D,#7AB317 calc(1%*var(--x)));
}
@keyframes x {
  to {--x: 0}
}
@keyframes y {
  0% {--y: 0}
}
progress::-webkit-progress-bar {
  overflow: auto;
}
progress::-webkit-progress-value {
  anchor-name: --progress;
  view-timeline: --progress inline;
  background: 
    conic-gradient(var(--_c) 0 0)
    0/calc(var(--y)*100%) 100% no-repeat;
}
progress::before {
  /* tooltip setting */
  --b: 1em; /* triangle base */
  --h: .5em; /* triangle height */
  
  position: absolute;
  position-anchor: --progress;
  position-area: top right;
  translate: -50% calc(-1.2*var(--h));
  content: counter(val) "%";
  counter-reset: val var(--x);
  font-family: system-ui,sans-serif;
  font-weight: 900;
  font-size: 1.5em;
  padding: .5em;
  border-radius: .3em;
  clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
    calc(50% + var(--b)/2) 100%,
    50% calc(100% + var(--h)),
    calc(50% - var(--b)/2) 100%);
  background: var(--_c);
  border-image: conic-gradient(var(--_c) 0 0) fill 0/
    0 calc(50% - var(--b)/2)/0 0 var(--h) 0;
}
progress.bottom::before {
  position-area: bottom right;
  translate: -50% calc(1.2*var(--h));
  clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
    calc(50% + var(--b)/2) 0,
    50% calc(-1*var(--h)),
    calc(50% - var(--b)/2) 0);
  border-image: conic-gradient(var(--_c) 0 0) fill 0/
    0 calc(50% - var(--b)/2)/var(--h) 0 0 0;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
  grid-template-columns: auto auto;
  gap: 20px;
}