円形プログレスの残りステップ表示フォーム

<div class="d04-09-09-wrap">
          <div class="d04-09-09-top">
            <svg class="d04-09-09-ring" viewBox="0 0 64 64" width="52" height="52" aria-hidden="true">
              <circle cx="32" cy="32" r="26" fill="none" stroke="#e4e8ef" stroke-width="6"/>
              <circle class="d04-09-09-ringbar" cx="32" cy="32" r="26" fill="none" stroke="#4a6cf7" stroke-width="6" stroke-linecap="round" transform="rotate(-90 32 32)"/>
            </svg>
            <div class="d04-09-09-ringtext"><span class="d04-09-09-remain">3</span><small>残り</small></div>
          </div>
          <div class="d04-09-09-panel">
            <div class="d04-09-09-page is-show">
              <label class="d04-09-09-flabel">お名前</label>
              <input type="text" class="d04-09-09-finput" placeholder="山田 太郎">
            </div>
            <div class="d04-09-09-page">
              <label class="d04-09-09-flabel">ご連絡先</label>
              <input type="tel" class="d04-09-09-finput" placeholder="090-xxxx-xxxx">
            </div>
            <div class="d04-09-09-page">
              <label class="d04-09-09-flabel">ご要望</label>
              <textarea class="d04-09-09-finput" rows="2" placeholder="自由にご記入ください"></textarea>
            </div>
          </div>
          <div class="d04-09-09-nav">
            <button type="button" class="d04-09-09-prevbtn" disabled>戻る</button>
            <button type="button" class="d04-09-09-nextbtn">次へ</button>
          </div>
        </div>

.d04-09-09-wrap{width:min(280px,100%)}
        .d04-09-09-top{position:relative;width:52px;height:52px;margin:0 auto 14px}
        .d04-09-09-ring{display:block}
        .d04-09-09-ringbar{transition:stroke-dashoffset .4s ease}
        .d04-09-09-ringtext{
          position:absolute;inset:0;display:flex;flex-direction:column;
          align-items:center;justify-content:center;line-height:1.1;
        }
        .d04-09-09-remain{font-size:16px;font-weight:800;color:#4a6cf7}
        .d04-09-09-ringtext small{font-size:8px;color:#8a93a3}
        .d04-09-09-panel{min-height:64px}
        .d04-09-09-page{display:none;flex-direction:column;gap:6px}
        .d04-09-09-page.is-show{display:flex}
        .d04-09-09-flabel{font-size:11px;color:#8a93a3}
        .d04-09-09-finput{
          padding:10px 12px;font-size:13px;border:2px solid #d5d9e0;border-radius:8px;
          outline:none;background:#fff;font-family:inherit;resize:none;
        }
        .d04-09-09-finput:focus{border-color:#4a6cf7}
        .d04-09-09-nav{display:flex;justify-content:space-between;gap:10px;margin-top:16px}
        .d04-09-09-nav button{
          padding:9px 14px;font-size:12px;font-weight:700;border-radius:8px;cursor:pointer;
          border:2px solid #d5d9e0;background:#fff;color:#444;
        }
        .d04-09-09-nextbtn{background:#4a6cf7;border-color:#4a6cf7;color:#fff}
        .d04-09-09-nav button:disabled{opacity:.4;cursor:not-allowed}

(function(){
        var wrap=document.querySelector('.d04-09-09-wrap');
        if(!wrap)return;
        var bar=wrap.querySelector('.d04-09-09-ringbar');
        var remain=wrap.querySelector('.d04-09-09-remain');
        var pages=wrap.querySelectorAll('.d04-09-09-page');
        var prevBtn=wrap.querySelector('.d04-09-09-prevbtn');
        var nextBtn=wrap.querySelector('.d04-09-09-nextbtn');
        var total=pages.length;
        var circumference=2*Math.PI*26;
        bar.style.strokeDasharray=circumference;
        var cur=0;
        function paint(){
          pages.forEach(function(p,i){p.classList.toggle('is-show',i===cur);});
          var progress=(cur+1)/total;
          bar.style.strokeDashoffset=circumference*(1-progress);
          remain.textContent=total-cur-1;
          prevBtn.disabled=cur===0;
          nextBtn.textContent=cur===total-1?'送信する':'次へ';
        }
        prevBtn.addEventListener('click',function(){
          if(cur>0){cur--;paint();}
        });
        nextBtn.addEventListener('click',function(){
          if(cur<total-1){cur++;paint();}
        });
        paint();
      })();