伸びるプログレスバー申込みフォーム

<div class="d04-09-03-wrap">
          <div class="d04-09-03-head">
            <span class="d04-09-03-title">お申し込み手続き</span>
            <span class="d04-09-03-pct">33%</span>
          </div>
          <div class="d04-09-03-track"><span class="d04-09-03-fill"></span></div>
          <div class="d04-09-03-body">
            <div class="d04-09-03-page is-show">
              <label class="d04-09-03-flabel">お名前</label>
              <input type="text" class="d04-09-03-finput" placeholder="山田 太郎">
            </div>
            <div class="d04-09-03-page">
              <label class="d04-09-03-flabel">ご住所</label>
              <input type="text" class="d04-09-03-finput" placeholder="東京都〇〇区…">
            </div>
            <div class="d04-09-03-page">
              <label class="d04-09-03-flabel">お支払い方法</label>
              <select class="d04-09-03-finput"><option>クレジットカード</option><option>銀行振込</option></select>
            </div>
          </div>
          <div class="d04-09-03-nav">
            <button type="button" class="d04-09-03-prevbtn" disabled>戻る</button>
            <button type="button" class="d04-09-03-nextbtn">次へ</button>
          </div>
        </div>

.d04-09-03-wrap{width:min(280px,100%)}
        .d04-09-03-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
        .d04-09-03-title{font-size:12px;font-weight:700;color:#333}
        .d04-09-03-pct{font-size:12px;font-weight:700;color:#4a6cf7}
        .d04-09-03-track{height:8px;background:#e4e8ef;border-radius:99px;overflow:hidden;margin-bottom:16px}
        .d04-09-03-fill{
          display:block;height:100%;width:33.33%;border-radius:99px;
          background:linear-gradient(90deg,#4a6cf7,#7c8cf8);transition:width .4s ease;
        }
        .d04-09-03-body{min-height:64px}
        .d04-09-03-page{display:none;flex-direction:column;gap:6px}
        .d04-09-03-page.is-show{display:flex}
        .d04-09-03-flabel{font-size:11px;color:#8a93a3}
        .d04-09-03-finput{
          padding:10px 12px;font-size:13px;border:2px solid #d5d9e0;border-radius:8px;
          outline:none;background:#fff;font-family:inherit;
        }
        .d04-09-03-finput:focus{border-color:#4a6cf7}
        .d04-09-03-nav{display:flex;justify-content:space-between;gap:10px;margin-top:16px}
        .d04-09-03-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-03-nextbtn{background:#4a6cf7;border-color:#4a6cf7;color:#fff}
        .d04-09-03-nav button:disabled{opacity:.4;cursor:not-allowed}

(function(){
        var wrap=document.querySelector('.d04-09-03-wrap');
        if(!wrap)return;
        var pages=wrap.querySelectorAll('.d04-09-03-page');
        var fill=wrap.querySelector('.d04-09-03-fill');
        var pct=wrap.querySelector('.d04-09-03-pct');
        var prevBtn=wrap.querySelector('.d04-09-03-prevbtn');
        var nextBtn=wrap.querySelector('.d04-09-03-nextbtn');
        var total=pages.length;
        var cur=0;
        function paint(){
          pages.forEach(function(p,i){p.classList.toggle('is-show',i===cur);});
          var p=Math.round((cur+1)/total*100);
          fill.style.width=p+'%';
          pct.textContent=p+'%';
          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();}
        });
      })();