Zeigarnik Effect

<div class="list" id="list"></div>

.list{width:80%;max-width:260px;display:grid;gap:10px}
.item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface);transition:opacity .6s ease}
.item.done{opacity:.4}
.box{width:16px;height:16px;border-radius:4px;border:2px solid var(--muted);display:grid;place-items:center;font:900 11px/1 monospace;color:#fff;flex:none}
.item.done .box{background:var(--accent-3);border-color:var(--accent-3)}
.item.pending .box{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent-2) 50%,transparent)}50%{box-shadow:0 0 0 6px transparent}}
.item.pending{border-color:var(--accent-2)}
.txt{height:8px;flex:1;border-radius:4px;background:var(--line)}

const labels = ['Profile photo', 'Verify email', 'Add payment', 'Invite a teammate'];
const list = document.getElementById('list');
const items = labels.map((_, i) => {
  const it = document.createElement('div');
  it.className = 'item' + (i < 3 ? ' done' : ' pending');
  it.innerHTML = '<span class="box">' + (i < 3 ? '✓' : '') + '</span><span class="txt"></span>';
  list.appendChild(it);
  return it;
});
let idx = 3;
setInterval(() => {
  items[idx].classList.remove('pending');
  items[idx].classList.add('done');
  items[idx].querySelector('.box').textContent = '✓';
  idx = (idx + 1) % items.length;
  items[idx].classList.remove('done');
  items[idx].classList.add('pending');
  items[idx].querySelector('.box').textContent = '';
}, 2000);