<div id="donut" data-progress="10%">
</div>

$size: 100px;

:root {
  --progress: 0%;
}

div {
  height: $size;
  width: $size;
}

div {
  box-sizing: border-box;
  margin: 0 auto;
  display: grid;
  position: relative;
  place-items: center;
  background-image: conic-gradient(
    green var(--progress),
    hsl(120deg, 100%, 50%) var(--progress) 100%
  );
  border-radius: 50%;
  background-repeat: no-repeat;
  transition: all 0.3s;
  &::after {
    height: $size - 15px;
    width: $size - 15px;
    background: white;
    content: attr(data-progress);
    text-align: center;
    vertical-align: middle;
    line-height: $size - 15px;
    font-size: xx-large;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

let count = 0;
setInterval(() => {
  document.documentElement.style.setProperty(
    "--progress",
    (++count % 100) + "%"
  );
  donut.setAttribute("data-progress", (count % 100) + "%");
}, 300);