Onboarding journey

<div class="onboard"><div class="steps"><div><i>1</i><span>PROFILE</span></div><div><i>2</i><span>FIRST TASK</span></div><div><i>3</i><span>RESULT</span></div></div><div class="prompt">NEXT: <b id="next">COMPLETE PROFILE</b></div></div>

.onboard{width:min(91%,620px);font:900 clamp(10px,max(1.6vmin,1vw),14px)/1.2 sans-serif}.steps{display:flex;justify-content:space-between;gap:5px;position:relative}.steps:before{content:'';position:absolute;top:clamp(16px,4vmin,31px);left:8%;right:8%;height:3px;background:var(--line)}.steps>div{position:relative;text-align:center;min-width:0;flex:1}.steps i{display:grid;place-items:center;margin:auto;width:clamp(32px,8vmin,62px);height:clamp(32px,8vmin,62px);border:2px solid var(--line);border-radius:50%;font-style:normal;background:var(--bg);transition:.4s}.steps span{display:block;margin-top:8px;color:var(--muted)}.steps .done i{border-color:var(--accent);background:var(--accent);color:#fff}.prompt{margin-top:clamp(15px,4vmin,34px);padding:clamp(9px,2vmin,17px);border:1px solid var(--fg);text-align:center}.prompt b{color:var(--accent)}

let step=0;const labels=['COMPLETE PROFILE','CREATE FIRST TASK','VIEW RESULT','VALUE REACHED'];const nodes=[...document.querySelectorAll('.steps>div')];function show(){nodes.forEach((node,i)=>node.classList.toggle('done',i<step));document.querySelector('#next').textContent=labels[step];step=step===3?0:step+1}show();setInterval(show,1300);