@property --progress-value {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@keyframes html-progress {
  to {
    --progress-value: 6-;
  }
}
@keyframes css-progress {
  to {
    --progress-value: 87;
  }
}
@keyframes js-progress {
  to {
    --progress-value: 73;
  }
}
.progress-bar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /* to center the percentage value */
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-bar::before {
  counter-reset: percentage var(--progress-value);
  content: counter(percentage) "%";
}

.html {
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(rgb(134, 109, 207) calc(var(--progress-value) * 1%), pink 0);
  animation: html-progress 2s 1 forwards;
}

.html::before {
  animation: html-progress 2s 1 forwards;
}

progress {
  visibility: hidden;
  width: 0;
  height: 0;
}/*# sourceMappingURL=progress.css.map */