<div class="circular-progress" data-inner-circle-color="lightgrey" data-percentage="80" data-progress-color="crimson" data-bg-color="black">
  <div class="inner-circle"></div>
  <p class="percentage">0%</p>
</div>

<div class="circular-progress" data-inner-circle-color="white" data-percentage="70" data-progress-color="rebeccapurple" data-bg-color="violet">
  <div class="inner-circle"></div>
  <p class="percentage">0%</p>
</div>

<div class="circular-progress" data-inner-circle-color="lime" data-percentage="100" data-progress-color="green" data-bg-color="lightgrey">
  <div class="inner-circle"></div>
  <p class="percentage">0%</p>
</div>

<div class="circular-progress" data-inner-circle-color="cyan" data-percentage="60" data-progress-color="blue" data-bg-color="skyblue">
  <div class="inner-circle"></div>
  <p class="percentage">0%</p>
</div>

<div class="circular-progress" data-inner-circle-color="black" data-percentage="85" data-progress-color="white" data-bg-color="grey">
  <div class="inner-circle"></div>
  <p class="percentage">0%</p>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --progress-bar-width: 200px;
  --progress-bar-height: 200px;
  --font-size: 2rem;
}

body {
  height: 100vh;
  background-color: #100c08;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  place-items: center;
  gap: 2rem;
}
.circular-progress {
  width: var(--progress-bar-width);
  height: var(--progress-bar-height);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inner-circle {
  position: absolute;
  width: calc(var(--progress-bar-width) - 30px);
  height: calc(var(--progress-bar-height) - 30px);
  border-radius: 50%;
  background-color: lightgrey;
}

.percentage {
  position: relative;
  font-size: var(--font-size);
  color: rgb(0, 0, 0, 0.8);
}

@media screen and (max-width: 800px) {
  :root {
    --progress-bar-width: 150px;
    --progress-bar-height: 150px;
    --font-size: 1.3rem;
  }
}

@media screen and (max-width: 500px) {
  :root {
    --progress-bar-width: 120px;
    --progress-bar-height: 120px;
    --font-size: 1rem;
  }
}
const circularProgress = document.querySelectorAll(".circular-progress");

Array.from(circularProgress).forEach((progressBar) => {
  const progressValue = progressBar.querySelector(".percentage");
  const innerCircle = progressBar.querySelector(".inner-circle");
  let startValue = 0,
    endValue = Number(progressBar.getAttribute("data-percentage")),
    speed = 50,
    progressColor = progressBar.getAttribute("data-progress-color");

  const progress = setInterval(() => {
    startValue++;
    progressValue.textContent = `${startValue}%`;
    progressValue.style.color = `${progressColor}`;

    innerCircle.style.backgroundColor = `${progressBar.getAttribute(
      "data-inner-circle-color"
    )}`;

    progressBar.style.background = `conic-gradient(${progressColor} ${
      startValue * 3.6
    }deg,${progressBar.getAttribute("data-bg-color")} 0deg)`;
    if (startValue === endValue) {
      clearInterval(progress);
    }
  }, speed);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.