進捗ステップ色分けパンくず

<div class="d03-14-12-wrap">
          <div class="d03-14-12-steps">
            <span class="d03-14-12-bar"><span class="d03-14-12-fill"></span></span>
            <button type="button" class="d03-14-12-step" data-i="0"><span class="d03-14-12-dot">✓</span>カート</button>
            <button type="button" class="d03-14-12-step" data-i="1"><span class="d03-14-12-dot">✓</span>配送先</button>
            <button type="button" class="d03-14-12-step" data-i="2"><span class="d03-14-12-dot">3</span>お支払い</button>
            <button type="button" class="d03-14-12-step" data-i="3"><span class="d03-14-12-dot">4</span>完了</button>
          </div>
        </div>

.d03-14-12-wrap{width:100%;max-width:300px}
        .d03-14-12-steps{position:relative;display:flex;justify-content:space-between}
        .d03-14-12-bar{position:absolute;top:13px;left:22px;right:22px;height:3px;background:#e2e8f0;border-radius:3px;z-index:0}
        .d03-14-12-fill{display:block;height:100%;width:0;background:#2563eb;border-radius:3px;transition:width .4s cubic-bezier(.4,0,.2,1)}
        .d03-14-12-step{
          position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;
          border:none;background:none;cursor:pointer;font-family:inherit;
          font-size:10.5px;font-weight:700;color:#94a3b8;padding:0;
        }
        .d03-14-12-dot{
          width:26px;height:26px;border-radius:999px;background:#e2e8f0;color:#94a3b8;
          display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;
          transition:background .3s ease,color .3s ease,transform .3s ease;
        }
        .d03-14-12-step.done .d03-14-12-dot{background:#22c55e;color:#fff}
        .d03-14-12-step.current .d03-14-12-dot{background:#2563eb;color:#fff;transform:scale(1.15);box-shadow:0 0 0 4px #dbeafe}
        .d03-14-12-step.current{color:#2563eb}
        .d03-14-12-step.done{color:#16a34a}

(function(){
        var wrap=document.querySelector('.d03-14-12-wrap');
        if(!wrap)return;
        var steps=wrap.querySelectorAll('.d03-14-12-step');
        var fill=wrap.querySelector('.d03-14-12-fill');
        var total=steps.length;
        function apply(idx){
          steps.forEach(function(s){
            var i=parseInt(s.getAttribute('data-i'),10);
            s.classList.remove('done','current');
            if(i<idx){s.classList.add('done')}
            else if(i===idx){s.classList.add('current')}
          });
          fill.style.width=(idx/(total-1)*100)+'%';
        }
        steps.forEach(function(s){
          s.addEventListener('click',function(){
            apply(parseInt(s.getAttribute('data-i'),10));
          });
        });
        apply(2);
      })();