ステップウィザードインジケーター

<div class="d11-01-11-wiz">
          <ol class="d11-01-11-steps">
            <li class="done"><span class="d11-01-11-dot">1</span><span class="d11-01-11-lb">情報入力</span></li>
            <li class="active"><span class="d11-01-11-dot">2</span><span class="d11-01-11-lb">内容確認</span></li>
            <li><span class="d11-01-11-dot">3</span><span class="d11-01-11-lb">完了</span></li>
          </ol>
          <button class="d11-01-11-next" type="button">次へ進む</button>
        </div>

.d11-01-11-wiz{width:min(300px,100%);text-align:center}
        .d11-01-11-steps{list-style:none;display:flex;margin:0 0 20px;padding:0}
        .d11-01-11-steps li{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
        .d11-01-11-steps li:not(:last-child)::after{
          content:"";position:absolute;top:15px;left:calc(50% + 20px);width:calc(100% - 40px);height:2px;
          background:#e2e6ee;z-index:0;transition:background .3s ease;
        }
        .d11-01-11-steps li.done:not(:last-child)::after{background:#22b573}
        .d11-01-11-dot{
          position:relative;z-index:1;width:30px;height:30px;border-radius:50%;
          display:flex;align-items:center;justify-content:center;
          background:#fff;border:2px solid #d5d9e0;color:#8a93a3;font-size:13px;font-weight:700;
          transition:background .3s,border-color .3s,color .3s;
        }
        .d11-01-11-steps li.active .d11-01-11-dot{border-color:#4a6cf7;color:#4a6cf7}
        .d11-01-11-steps li.done .d11-01-11-dot{background:#22b573;border-color:#22b573;color:#fff}
        .d11-01-11-lb{font-size:10.5px;color:#8a93a3}
        .d11-01-11-steps li.active .d11-01-11-lb{color:#2b3245;font-weight:700}
        .d11-01-11-next{padding:10px 26px;border:none;border-radius:8px;background:#4a6cf7;color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .25s}
        .d11-01-11-next:hover{background:#3a58d6}

(function(){
        var wiz = document.querySelector('.d11-01-11-wiz');
        if(!wiz)return;
        var items = [].slice.call(wiz.querySelectorAll('.d11-01-11-steps li'));
        var btn = wiz.querySelector('.d11-01-11-next');
        function currentIndex(){
          for(var i=0;i<items.length;i++){ if(items[i].classList.contains('active')) return i; }
          return -1;
        }
        btn.addEventListener('click', function(){
          var idx = currentIndex();
          if(idx === -1){
            items.forEach(function(it){ it.classList.remove('done'); });
            items[0].classList.add('active');
            return;
          }
          items[idx].classList.remove('active');
          items[idx].classList.add('done');
          var next = idx + 1;
          if(next < items.length){
            items[next].classList.add('active');
          }else{
            items.forEach(function(it){ it.classList.remove('done','active'); });
            items[0].classList.add('active');
          }
        });
      })();