.circular-progress circle {
  cx: var(--half-size);
  cy: var(--half-size);
  r: var(--radius);
  stroke-width: var(--stroke-width);
  fill: none;
  stroke-linecap: butt;
}

.circular-progress circle.bg {
  stroke: rgba(255,255,255,0.15);
}

.circular-progress circle.fg {
  transform: rotate(-90deg);
  transform-origin: var(--half-size) var(--half-size);
  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
  transition: stroke-dasharray 0.3s linear 0s;
  stroke: #db32bb;
}

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

.circular-progress {
  --size: 200px;
  --half-size: calc(var(--size) / 2);
  --stroke-width: 60px;
  --radius: calc((var(--size) - var(--stroke-width)) / 2);
  --circumference: calc(var(--radius) * pi * 2);
  /*--dash: calc((100 * var(--circumference)) / 100);*/
  --dash: calc((var(--progress) * var(--circumference)) / 100);
  /*animation: progress-animation 5s linear 0s 1 forwards;*/
}

/*@keyframes progress-animation {
  from {
    --progress: 111.9;
  }
  to {
    --progress: 111.9;
  }
}*/