Wachtrij die aftelt New

Queue for a support chat: you see yourself standing in a row of figures, the first one gets helped and the rest shuffles up with a little hop while "You are number 3" counts down. When it is your turn the agent says hello in a speech bubble. The position is announced through a status line. Use it with a chat button, a call-back queue, a pickup counter or an online consultation hour.

Chat met Fietsenwinkel De Spaak

Je bent nummer 3 in de wachtrij.

Nog ongeveer 4 minuten.

How to use it

Paste the HTML where the components should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- 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'));

More components

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →