How it works steps

<div class="steps" id="steps">
  <div class="step" data-i="0"><span class="num">1</span><h4>Connect your data</h4><p>One click, no code.</p></div>
  <div class="step" data-i="1"><span class="num">2</span><h4>Set your rules</h4><p>Pick a template or build one.</p></div>
  <div class="step" data-i="2"><span class="num">3</span><h4>Go live</h4><p>Changes apply instantly.</p></div>
</div>

.steps{width:min(94%,760px);display:flex;position:relative}
.step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(5px,1.2vmin,8px);
  padding:0 4%;position:relative}
.step::before{content:'';position:absolute;top:clamp(11px,2.4vmin,17px);left:-50%;width:100%;height:2px;
  background:var(--line);z-index:0}
.step:first-child::before{display:none}
.step::after{content:'';position:absolute;top:clamp(11px,2.4vmin,17px);left:-50%;width:0;height:2px;
  background:var(--accent);z-index:1;transition:width .6s ease}
.step:first-child::after{display:none}
.step.done::after{width:100%}
.num{width:clamp(22px,4.8vmin,34px);height:clamp(22px,4.8vmin,34px);border-radius:50%;background:var(--line);
  color:var(--muted);display:grid;place-items:center;font-weight:800;font-size:clamp(9px,1.8vmin,13px);
  position:relative;z-index:2;transition:background .4s,color .4s}
.step.active .num,.step.done .num{background:var(--accent);color:#fff}
.step h4{margin:0;font-size:clamp(8px,1.6vmin,12px)}
.step p{margin:0;font-size:clamp(7px,1.3vmin,10px);color:var(--muted)}

const steps = document.querySelectorAll('.step');
let i = 0;
function apply() {
  steps.forEach(function (s, idx) {
    s.classList.toggle('active', idx === i);
    s.classList.toggle('done', idx < i);
  });
}
apply();
setInterval(function () {
  i = (i + 1) % (steps.length + 1);
  apply();
}, 1300);