스테퍼

<ol class="stp">
  <li data-state="done"><span class="num">✓</span>배송지</li>
  <li data-state="current"><span class="num">2</span>결제</li>
  <li data-state="upcoming"><span class="num">3</span>완료</li>
</ol>

.stp{list-style:none;display:flex;margin:0;padding:0;width:min(280px,90%)}
.stp li{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.stp li:not(:last-child)::after{content:"";position:absolute;top:13px;left:calc(50% + 20px);width:calc(100% - 40px);height:2px;background:var(--line)}
.stp li[data-state=done]:not(:last-child)::after{background:var(--accent)}
.num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--line);color:var(--muted);border:2px solid transparent;transition:background .25s,color .25s}
[data-state=current] .num{background:var(--surface);color:var(--accent);border-color:var(--accent)}
[data-state=done] .num{background:var(--accent);color:#fff}
[data-state=current]{color:var(--fg);font-weight:700}

const items = [...document.querySelectorAll('.stp li')];
function paint(cur) {
  items.forEach((li, i) => {
    li.dataset.state = i < cur ? 'done' : i === cur ? 'current' : 'upcoming';
    li.querySelector('.num').textContent = i < cur ? '✓' : String(i + 1);
  });
}
let cur = 1;
paint(cur);
setInterval(() => { cur = (cur + 1) % (items.length + 1); paint(cur); }, 1600);