Загрузчик

<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"></circle>
  </svg>
</div>

<style>
  .progress-circle {
    --yellow: #c75cf9;

    font-family: "JetBrains Mono", monospace;
    font-size: 32px;
    font-weight: 800;
    padding: 0;
    color: var(--yellow);
    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;
    }
  }
</style>

<script lang="js">
  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);
  }
</script>