Wachtrij die aftelt Nieuw

<!-- Wachtrij die aftelt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="k7q">
  <div class="k7q__card">
    <p class="k7q__h">Chat met Fietsenwinkel De Spaak</p>
    <p class="k7q__big" aria-hidden="true"><span class="k7q__pre">Je bent nummer</span> <span class="k7q__num"><span class="k7q__d">3</span></span></p>
    <p class="k7q__sr" role="status">Je bent nummer 3 in de wachtrij.</p>
    <div class="k7q__line" aria-hidden="true">
      <span class="k7q__desk"><svg viewBox="0 0 34 40"><circle cx="17" cy="11" r="7" fill="#0a0a0a"/><path d="M8 11a9 9 0 0 1 18 0" fill="none" stroke="#F5480F" stroke-width="2.5"/><path d="M26 12v4h-4" fill="none" stroke="#F5480F" stroke-width="2"/><path d="M4 40c0-11 6-16 13-16s13 5 13 16z" fill="#0a0a0a"/></svg><span class="k7q__nm">Mirjam</span></span>
      <span class="k7q__p" data-k="0"><svg viewBox="0 0 26 34"><circle cx="13" cy="8" r="6"/><path d="M2 34c0-9 5-13 11-13s11 4 11 13z"/></svg></span>
      <span class="k7q__p" data-k="1"><svg viewBox="0 0 26 34"><circle cx="13" cy="8" r="6"/><path d="M2 34c0-9 5-13 11-13s11 4 11 13z"/></svg></span>
      <span class="k7q__p k7q__p--me" data-k="2"><svg viewBox="0 0 26 34"><circle cx="13" cy="8" r="6"/><path d="M2 34c0-9 5-13 11-13s11 4 11 13z"/></svg><span class="k7q__me">jij</span></span>
      <span class="k7q__bub">Hoi! Waarmee kan ik helpen?</span>
    </div>
    <div class="k7q__foot"><p class="k7q__eta">Nog ongeveer 4 minuten.</p><button class="k7q__again" type="button">Opnieuw afspelen</button></div>
  </div>
</div>
</div>

/* Wachtrij die aftelt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.k7q{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;text-align:left;padding:10px 12px}
.k7q *{box-sizing:border-box}
.k7q__card{width:100%;max-width:350px;background:#fff;border:1px solid rgba(10,10,10,.14);border-radius:8px;padding:12px 14px}
.k7q__h{margin:0;font-size:13px;font-weight:600;color:#4d4d4d}
.k7q__big{display:flex;align-items:baseline;gap:7px;margin:2px 0 4px;font-size:17px;font-weight:700;line-height:1.2}
.k7q__num{display:inline-block;height:34px;overflow:hidden;font-size:30px;font-weight:800;line-height:34px;color:#b8360a;font-variant-numeric:tabular-nums}
.k7q__d{display:block}
.k7q__d.is-in{animation:k7q-in .4s ease-out}
@keyframes k7q-in{from{transform:translateY(100%)}to{transform:none}}
.k7q__sr{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.k7q__line{position:relative;height:64px;border-bottom:1px solid rgba(10,10,10,.12)}
.k7q__desk{position:absolute;left:0;bottom:0;display:flex;flex-direction:column;align-items:center;width:44px}
.k7q__desk svg{width:30px;height:36px}
.k7q__nm{font-size:12px;line-height:16px;color:#4d4d4d}
.k7q__p{position:absolute;left:56px;bottom:19px;width:26px;transform:translateX(calc(var(--s,0) * 36px));transition:transform .6s cubic-bezier(.4,1.3,.5,1),opacity .45s}
.k7q__p svg{display:block;width:26px;height:34px;fill:#c9c4bc}
.k7q__p.is-hop svg{animation:k7q-hop .6s ease-out}
@keyframes k7q-hop{40%{transform:translateY(-6px)}}
.k7q__p--me svg{fill:#F5480F}
.k7q__me{position:absolute;left:50%;top:100%;transform:translateX(-50%);font-size:12px;line-height:16px;font-weight:600}
.k7q__p.is-gone{opacity:0;transform:translateX(-28px) translateY(-4px) scale(.85)}
.k7q__bub{position:absolute;left:94px;bottom:28px;padding:6px 9px;background:#0a0a0a;color:#fff;border-radius:8px 8px 8px 2px;font-size:12px;line-height:1.3;white-space:nowrap;opacity:0;transform:translateY(6px) scale(.9);transform-origin:0 100%;transition:opacity .3s,transform .35s cubic-bezier(.3,1.4,.5,1)}
.k7q.is-turn .k7q__bub{opacity:1;transform:none}
.k7q__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.k7q__eta{margin:0;min-width:0;font-size:12px;line-height:1.35;color:#4d4d4d}
.k7q__again{flex:none;height:30px;padding:0 10px;border:1px solid #0a0a0a;border-radius:4px;background:#fff;color:#0a0a0a;font:500 12px/1 'Switzer',system-ui,sans-serif;cursor:pointer}
.k7q__again:hover{background:#f4f3f1}
.k7q__again:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.k7q__p,.k7q__bub{transition:none}.k7q__p.is-hop svg,.k7q__d.is-in{animation:none}}

// Wachtrij die aftelt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.k7q'); if (!w) return;
    var ps = [].slice.call(w.querySelectorAll('.k7q__p')), pre = w.querySelector('.k7q__pre'), num = w.querySelector('.k7q__num'), sr = w.querySelector('.k7q__sr');
    var eta = w.querySelector('.k7q__eta'), again = w.querySelector('.k7q__again');
    var ETA = { 3: 'Nog ongeveer 4 minuten.', 2: 'Nog ongeveer 2 minuten.', 1: 'Nog even, je bent de volgende.' };
    var served = 0, ti = null, vis = false;
    function draw(anim) {
      ps.forEach(function (p, k) {
        var s = Math.max(k === 2 ? 0 : -1, k - served); p.classList.toggle('is-gone', s < 0);
        if (s >= 0) p.style.setProperty('--s', s);
        if (anim && s >= 0) { p.classList.remove('is-hop'); void p.offsetWidth; p.classList.add('is-hop'); }
      });
      var pos = 3 - served, turn = served >= 3;
      w.classList.toggle('is-turn', turn);
      if (turn) {
        pre.textContent = 'Je bent aan de beurt'; num.style.display = 'none';
        eta.textContent = 'Mirjam helpt je nu.'; sr.textContent = 'Je bent aan de beurt. Mirjam helpt je nu.';
      } else {
        pre.textContent = 'Je bent nummer'; num.style.display = '';
        num.innerHTML = '<span class="k7q__d' + (anim ? ' is-in' : '') + '">' + pos + '</span>';
        eta.textContent = ETA[pos]; sr.textContent = 'Je bent nummer ' + pos + ' in de wachtrij.';
      }
    }
    function stop() { if (ti) { clearInterval(ti); ti = null; } }
    function start() { stop(); if (served >= 3) return; ti = setInterval(function () { if (!vis) return; served++; draw(true); if (served >= 3) stop(); }, 2800); }
    again.addEventListener('click', function () { served = 0; draw(false); start(); });
    draw(false);
    if ('IntersectionObserver' in window) {
      new IntersectionObserver(function (es) { es.forEach(function (e) { vis = e.isIntersecting; if (vis && !ti && served < 3) start(); }); }, { threshold: .4 }).observe(w);
    } else { vis = true; start(); }
}
init(document.querySelector('.jouw-container'));