複数ステップ進捗フォーム(別角度)

<div class="d04-03-06-wrap">
          <div class="d04-03-06-dots">
            <span class="d04-03-06-dot is-active">1</span>
            <span class="d04-03-06-line"></span>
            <span class="d04-03-06-dot">2</span>
            <span class="d04-03-06-line"></span>
            <span class="d04-03-06-dot">3</span>
          </div>
          <p class="d04-03-06-step-txt">ステップ 1: 基本情報の入力</p>
          <div class="d04-03-06-nav">
            <button type="button" class="d04-03-06-prev" disabled>戻る</button>
            <button type="button" class="d04-03-06-next">次へ</button>
          </div>
        </div>

.d04-03-06-wrap{width:min(280px,100%);text-align:center}
        .d04-03-06-dots{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:16px}
        .d04-03-06-dot{
          width:26px;height:26px;border-radius:50%;background:#e4e8ef;color:#8a93a3;
          display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
          transition:background .3s,color .3s;flex:0 0 auto;
        }
        .d04-03-06-dot.is-active{background:#4a6cf7;color:#fff}
        .d04-03-06-dot.is-done{background:#22b573;color:#fff}
        .d04-03-06-line{width:34px;height:3px;background:#e4e8ef;transition:background .3s}
        .d04-03-06-line.is-done{background:#22b573}
        .d04-03-06-step-txt{margin:0 0 16px;font-size:13px;color:#444}
        .d04-03-06-nav{display:flex;justify-content:center;gap:10px}
        .d04-03-06-nav button{
          padding:9px 16px;font-size:13px;font-weight:700;border-radius:8px;cursor:pointer;
          border:2px solid #d5d9e0;background:#fff;color:#444;transition:opacity .2s;
        }
        .d04-03-06-nav .d04-03-06-next{background:#4a6cf7;border-color:#4a6cf7;color:#fff}
        .d04-03-06-nav button:disabled{opacity:.4;cursor:not-allowed}

(function(){
        var wrap=document.querySelector('.d04-03-06-wrap');
        if(!wrap)return;
        var dots=Array.prototype.slice.call(wrap.querySelectorAll('.d04-03-06-dot'));
        var lines=Array.prototype.slice.call(wrap.querySelectorAll('.d04-03-06-line'));
        var txt=wrap.querySelector('.d04-03-06-step-txt');
        var prevBtn=wrap.querySelector('.d04-03-06-prev');
        var nextBtn=wrap.querySelector('.d04-03-06-next');
        var labels=['ステップ 1: 基本情報の入力','ステップ 2: ご連絡先の入力','ステップ 3: 内容の確認'];
        var cur=0;
        function paint(){
          dots.forEach(function(d,i){
            d.classList.toggle('is-active',i===cur);
            d.classList.toggle('is-done',i<cur);
          });
          lines.forEach(function(l,i){l.classList.toggle('is-done',i<cur);});
          txt.textContent=labels[cur];
          prevBtn.disabled=cur===0;
          nextBtn.textContent=cur===labels.length-1?'完了':'次へ';
        }
        prevBtn.addEventListener('click',function(){
          if(cur>0){cur--;paint();}
        });
        nextBtn.addEventListener('click',function(){
          if(cur<labels.length-1){cur++;paint();}
        });
      })();