円形パーセントローダー

<div class="d08-02-07-wrap">
          <svg class="d08-02-07-svg" viewBox="0 0 120 120" width="120" height="120" aria-hidden="true">
            <circle class="d08-02-07-track" cx="60" cy="60" r="52" />
            <circle class="d08-02-07-prog" cx="60" cy="60" r="52" />
          </svg>
          <span class="d08-02-07-num">0%</span>
        </div>

.d08-02-07-wrap{position:relative;width:120px;height:120px}
        .d08-02-07-svg{transform:rotate(-90deg)}
        .d08-02-07-track,.d08-02-07-prog{
          fill:none;stroke-width:8;stroke-linecap:round;
        }
        .d08-02-07-track{stroke:#e5e7eb}
        .d08-02-07-prog{
          stroke:#f59e0b;
          stroke-dasharray:326.7;stroke-dashoffset:326.7;
        }
        .d08-02-07-num{
          position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
          font-size:22px;font-weight:700;color:#374151;font-variant-numeric:tabular-nums;
        }

(function(){
        var prog=document.querySelector('.d08-02-07 .d08-02-07-prog');
        var num=document.querySelector('.d08-02-07 .d08-02-07-num');
        if(!prog||!num)return;
        var CIRC=326.7,p=0;
        setInterval(function(){
          p+=2;
          if(p>115){p=0;} /* 100到達後少し待ってリセット */
          var v=Math.min(p,100);
          prog.style.strokeDashoffset=(CIRC*(1-v/100)).toFixed(1);
          num.textContent=v+'%';
        },60);
      })();