Progress Step Indicator

<div class="stp"><div class="stp-line"><div class="stp-fill" id="fill"></div></div>
<div class="stp-dots"><span class="on">1</span><span class="on">2</span><span>3</span><span>4</span></div></div>
<button class="stp-btn" id="next">Next step</button>

body{background:#f6f7fa;flex-direction:column;gap:24px}
.stp{width:300px}
.stp-line{position:relative;height:4px;background:#e2e6ef;border-radius:999px;margin:0 16px}
.stp-fill{height:100%;width:33%;background:linear-gradient(90deg,#ff7a18,#ff477e);border-radius:999px;transition:width .4s}
.stp-dots{display:flex;justify-content:space-between;margin-top:-13px}
.stp-dots span{width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid #e2e6ef;display:grid;place-items:center;font:700 13px/1 system-ui,sans-serif;color:#9099ad;transition:.3s}
.stp-dots span.on{background:linear-gradient(135deg,#ff7a18,#ff477e);border-color:transparent;color:#fff}
.stp-btn{font:600 14px/1 system-ui,sans-serif;color:#fff;background:#1a1f36;border:0;border-radius:10px;padding:11px 22px;cursor:pointer}

var step=2,dots=document.querySelectorAll('.stp-dots span'),fill=document.getElementById('fill');
document.getElementById('next').onclick=function(){step=Math.min(step+1,dots.length);dots.forEach(function(d,i){d.classList.toggle('on',i<step)});fill.style.width=(step/dots.length*100)+'%'};