@property --progress {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 0%;
}
[role='progressbar'][data-v-e7f95fc8] {
  --size: 100%;
  --bar-width: 12px;
}
[role='progressbar'][data-v-e7f95fc8] {
  --color-dark-glare: white;
  --color-success: #2dd4bf;
  --color-success-dark: #2d7a59;

  font-size: 1rem;

  aspect-ratio: 1 / 1;
  background: conic-gradient(
    var(--color-success),
    var(--color-success) var(--progress),
    var(--color-dark-glare) 0%
  );
  border-radius: 50vmax;
  display: grid;
  place-items: center;
  transition: --progress 500ms linear;
}
[role='progressbar'] > span[data-v-e7f95fc8] {
  display: none;
}

/* using aria-valuenow, to help enforce using it in the JS */
[role='progressbar'][data-v-e7f95fc8]::after {
  content: attr(aria-valuenow) '%';
  background: white;
  width: calc(100% - var(--bar-width));
  aspect-ratio: 1;
  border-radius: inherit;
  display: grid;
  place-items: center;
}

/* if js is disabled */
.progressbar[data-v-e7f95fc8]:not([role='progressbar']) {
  position: relative;
}
.progressbar[data-v-e7f95fc8]:not([role='progressbar'])::after {
  display: none;
}
.progressbar:not([role='progressbar']) span[data-v-e7f95fc8] {
  font-size: 1rem;
  text-align: center;
  color: var(--color-success-dark);
}