<div class="progress-circle">
  <span class="number" data-value="100"></span>
  <svg height="150" width="150" class="circle">
    <circle cx="75" cy="75" r="65" stroke="var(--yellow)" stroke-width="20" fill="none" />
  </svg>
</div>
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@800&display=swap");
 
:root {
  --night: #0d0029;
  --lavender: #daa4f6;
  --yellow: #f9dc5c;
  --red: #e84855;
  --mint: #55deae;
}

body {
  font-family: "JetBrains Mono", monospace;
  font-size: 32px;
  font-weight: 800;
  height: 100vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2%;
  justify-content: center;
  align-items: center;
  color: var(--yellow);
  background-color: var(--night);
  transition: all 0.3s ease-in-out;
}
.progress-circle{
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  outline: 1px solid var(--yellow);
  outline-offset: -1px;
}
.progress-circle::after,
.number{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}
.progress-circle::after{
  content:'';
  width: 110px;
  height: 110px;
  border-radius: inherit;
  outline: inherit;
}
.circle{
  stroke-dasharray: 410;
  stroke-dashoffset: 410;
  transform: rotate(-90deg);
  animation: bar-fill 8s linear forwards;
  animation-iteration-count: infinite;
}
@keyframes bar-fill {
  100% {
    stroke-dashoffset: 0;
  }
}
for (let i = 0; i < 500; i++) {
  const el = document.querySelector(".number");
  const elValue = Number(el.getAttribute("data-value"));
  let counter = 0;

  setInterval(() => {
    if (counter !== elValue) {
      counter++;
      el.innerHTML = `${counter}%`;
    }
    if (counter == 100) {
      counter = 0;
      el.setAttribute("data-value", 0);
    }
  }, 80);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.