Endowed Progress Effect

<div class="stage">
  <div class="pane"><div class="tag">A · 0/8</div>
    <div class="card" id="ca"></div>
  </div>
  <div class="pane"><div class="tag">B · 2/10</div>
    <div class="card" id="cb"></div>
  </div>
</div>

.stage{width:94%;height:88%;display:flex;gap:6%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)}
.card{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:70%}
.card span{aspect-ratio:1;border-radius:50%;border:2px solid var(--line);background:var(--bg)}
.card span.filled{background:var(--accent-3);border-color:var(--accent-3)}

function run(id, total, start, dur) {
  const card = document.getElementById(id);
  const dots = [];
  for (let i = 0; i < total; i++) { const s = document.createElement('span'); card.appendChild(s); dots.push(s); }
  function cycle() {
    dots.forEach((d, i) => d.classList.toggle('filled', i < start));
    let n = start;
    const step = () => {
      if (n >= total) { setTimeout(() => { dots.forEach((d) => d.classList.remove('filled')); setTimeout(cycle, 300); }, 500); return; }
      dots[n].classList.add('filled');
      n++;
      setTimeout(step, dur);
    };
    setTimeout(step, dur);
  }
  cycle();
}
run('ca', 8, 0, 380);
run('cb', 10, 2, 260);