<div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="--value:80"></div>

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

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

div[role="progressbar"] {
  --size: 12rem;
  --fg: #369;
  --bg: #def;
  --pgPercentage: var(--value);
  animation: growProgressBar 3s 1 forwards;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0), conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(var(--size) / 5);
  color: var(--fg);
  position: relative;
}

div[role="progressbar"]::before {
  counter-reset: percentage var(--value);
  content: counter(percentage) '%';
}

div[role="progressbar"]::after {
  content: '';
  position: absolute;
  height: calc(var(--size) / 2 + 10px);
  width: calc(10 / 100 * var(--size) + 20px);
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(calc(var(--pgPercentage) / 100 * 360deg));
  transform-origin: 50% 100%;
  animation: growProgressBar 3s 1 forwards;
  z-index: 1;
  background-image: radial-gradient(var(--fg) 0 50%, transparent 50% 100%);
  background-repeat: no-repeat;
  background-position: 0px 0;
  background-size: 40px 40px;
}


/* demo */

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}