round-diagram.scss

.circle {
  --progress-width: 4px;
  --progress-color: var(--ROUGE_SARDE);
  --expires-color: var(--BLUE_PLAZA);

  position: relative;
  border-radius: 50%;
  border: solid var(--progress-width) #aaa;

  @include lg {
    width: 65px;
    height: 65px;

    --progress-width: 4px;
  }
}

.circle__progress {
  position: absolute;
  inset: calc(var(--progress-width) * -1);
  z-index: 5;
  border-radius: 50%;
  background-image: conic-gradient(
    var(--progress-color) calc(var(--progress-value) * 3.6deg),
    transparent calc(var(--progress-value) * 3.6deg) 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--progress-width)), #000 calc(100% - var(--progress-width) + 1px));
}