Checkout progress

<div class="checkout-steps"><div class="step-head">CHECKOUT <b id="step-count">1 / 3</b></div><div class="step-track"><i id="step-fill"></i></div><div class="step-list"><button data-step="0">1<br>DELIVERY</button><button data-step="1">2<br>PAYMENT</button><button data-step="2">3<br>REVIEW</button></div><div class="step-panel" id="step-panel">Add a delivery address</div></div>

.checkout-steps{width:min(84%,490px);font:700 clamp(10px,3.2vmin,15px)/1.2 sans-serif}.step-head{display:flex;justify-content:space-between;letter-spacing:.04em}.step-head b{color:var(--accent)}.step-track{height:clamp(5px,1.7vmin,9px);background:var(--line);margin:clamp(9px,2vmin,17px) 0}.step-track i{display:block;height:100%;background:var(--accent);transition:width .45s}.step-list{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.step-list button{border:1px solid var(--line);background:var(--surface);color:var(--muted);font:inherit;min-height:clamp(34px,8vmin,62px);cursor:pointer}.step-list button.active{border-color:var(--accent);color:var(--fg);box-shadow:inset 0 -3px var(--accent)}.step-panel{margin-top:clamp(8px,2vmin,17px);padding:clamp(7px,1.5vmin,12px);border:1px solid var(--fg);color:var(--fg);text-align:center;min-height:1.2em}

const buttons=[...document.querySelectorAll('[data-step]')],count=document.querySelector('#step-count'),fill=document.querySelector('#step-fill'),panel=document.querySelector('#step-panel'),labels=['Add a delivery address','Choose payment method','Review your order'];let step=0;function draw(){count.textContent=(step+1)+' / 3';fill.style.width=((step+1)/3*100)+'%';panel.textContent=labels[step];buttons.forEach((button,index)=>button.classList.toggle('active',index===step))}buttons.forEach(button=>button.addEventListener('click',()=>{step=Number(button.dataset.step);draw()}));draw();setInterval(()=>{step=(step+1)%3;draw()},2600);