Pakketstatus die verspringt New

Order tracking status: a small van drives to the next stop with spinning wheels, the status heading rolls to the new state and at Delivered the parcel sits at the door of the little house. The four states sit as a real ordered list under the road, the current one in bold. Use it on the order page of a web shop, from a tracking email that links to the site or in a customer account. In production you fill the state from your carrier API.

Bestelling 20481, vandaag 14:00 tot 16:00

Ingepakt

Je koffie is gebrand en ingepakt in Utrecht.

Besteld
Ingepakt
Onderweg
Bezorgd

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.

<!-- Pakketstatus die verspringt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="k7p">
  <div class="k7p__card">
    <p class="k7p__order">Bestelling 20481, vandaag 14:00 tot 16:00</p>
    <p class="k7p__status" aria-live="polite"><span class="k7p__s">Ingepakt</span></p>
    <p class="k7p__note">Je koffie is gebrand en ingepakt in Utrecht.</p>
    <div class="k7p__road" aria-hidden="true" style="--p:1">
      <span class="k7p__track"><span class="k7p__done"></span></span>
      <span class="k7p__stop" style="--i:0"></span><span class="k7p__stop" style="--i:1"></span><span class="k7p__stop" style="--i:2"></span><span class="k7p__stop" style="--i:3"></span>
      <svg class="k7p__house" viewBox="0 0 22 22"><path d="M2 10 11 2.5 20 10v10H2z" fill="#fff" stroke="#0a0a0a" stroke-width="1.6" stroke-linejoin="round"/><path d="M9 20v-6h4v6" fill="none" stroke="#0a0a0a" stroke-width="1.6"/></svg>
      <span class="k7p__box"></span>
      <span class="k7p__van"><svg viewBox="0 0 36 22"><path d="M1 3a2 2 0 0 1 2-2h19v15H1z" fill="#F5480F"/><path d="M22 6h7l5 5v5H22z" fill="#0a0a0a"/><path d="M25 8h3.5l3 3H25z" fill="#fff"/><g class="k7p__wh"><circle cx="8" cy="17" r="3.6" fill="#0a0a0a"/><path d="M8 14.6v4.8" stroke="#fff" stroke-width="1.2"/></g><g class="k7p__wh"><circle cx="27" cy="17" r="3.6" fill="#0a0a0a"/><path d="M27 14.6v4.8" stroke="#fff" stroke-width="1.2"/></g></svg></span>
    </div>
    <ol class="k7p__labels"><li>Besteld</li><li>Ingepakt</li><li>Onderweg</li><li>Bezorgd</li></ol>
    <button class="k7p__next" type="button">Volgende status</button>
  </div>
</div>
</div>

/* Pakketstatus die verspringt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.k7p{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}
.k7p *{box-sizing:border-box}
.k7p__card{width:100%;max-width:350px;background:#fff;border:1px solid rgba(10,10,10,.14);border-radius:8px;padding:11px 14px 12px}
.k7p__order{margin:0;font-size:12px;color:#4d4d4d}
.k7p__status{height:24px;margin:2px 0 0;overflow:hidden;font-size:18px;font-weight:700;line-height:24px}
.k7p__s{display:block}
.k7p__s.is-in{animation:k7p-in .4s cubic-bezier(.3,1.3,.5,1)}
@keyframes k7p-in{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
.k7p__note{margin:0;min-height:17px;font-size:12px;line-height:1.4;color:#4d4d4d}
.k7p__road{position:relative;height:36px;margin:6px 0 2px}
.k7p__track{position:absolute;left:18px;right:40px;bottom:6px;height:3px;background:#e6e3de}
.k7p__done{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p) / 3 * 100%);background:#0a0a0a;transition:width .9s cubic-bezier(.45,0,.3,1)}
.k7p__stop{position:absolute;bottom:2px;left:calc(18px + var(--i) / 3 * (100% - 58px) - 5px);width:11px;height:11px;border:2px solid #c9c4bc;border-radius:50%;background:#fff}
.k7p__road[style*="--p:1"] .k7p__stop[style*="--i:0"],.k7p__road[style*="--p:1"] .k7p__stop[style*="--i:1"],.k7p__road[style*="--p:2"] .k7p__stop:not([style*="--i:3"]),.k7p__road[style*="--p:3"] .k7p__stop,.k7p__road[style*="--p:0"] .k7p__stop[style*="--i:0"]{border-color:#0a0a0a;background:#0a0a0a}
.k7p__house{position:absolute;right:0;bottom:0;width:22px;height:22px}
.k7p__box{position:absolute;right:26px;bottom:2px;width:10px;height:9px;background:#c9935a;border:1.5px solid #0a0a0a;border-radius:1px;opacity:0;transform:translateY(-14px)}
.k7p__road[style*="--p:3"] .k7p__box{animation:k7p-box .5s 1.1s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes k7p-box{to{opacity:1;transform:none}}
.k7p__van{position:absolute;bottom:9px;left:calc(var(--p) / 3 * (100% - 58px));width:36px;height:22px;transition:left .9s cubic-bezier(.45,0,.3,1)}
.k7p__van svg{display:block;width:36px;height:22px;overflow:visible}
.k7p__road[style*="--p:3"] .k7p__van{opacity:0;transition:left .9s cubic-bezier(.45,0,.3,1),opacity .35s 1s}
.k7p__wh{transform-box:fill-box;transform-origin:center}
.k7p__road.is-drive .k7p__wh{animation:k7p-wh .3s linear 3}
.k7p__road.is-drive .k7p__van svg{animation:k7p-bob .3s ease-in-out 3}
@keyframes k7p-wh{to{transform:rotate(360deg)}}
@keyframes k7p-bob{50%{transform:translateY(-1.5px)}}
.k7p__labels{display:flex;justify-content:space-between;list-style:none;margin:0 0 10px;padding:0;font-size:12px;color:#5b5b5b}
.k7p__labels li.is-cur{color:#0a0a0a;font-weight:700}
.k7p__next{height:32px;padding:0 12px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 13px/1 'Switzer',system-ui,sans-serif;cursor:pointer;transition:background-color .15s}
.k7p__next:hover{background:#333}
.k7p__next:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.k7p__done,.k7p__van,.k7p__road[style*="--p:3"] .k7p__van{transition:none}.k7p__road.is-drive .k7p__wh,.k7p__road.is-drive .k7p__van svg,.k7p__s.is-in{animation:none}.k7p__road[style*="--p:3"] .k7p__box{animation:none;opacity:1;transform:none}}

// Pakketstatus die verspringt · © 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('.k7p'); if (!w) return;
    var road = w.querySelector('.k7p__road'), s = w.querySelector('.k7p__status'), note = w.querySelector('.k7p__note'), lis = w.querySelectorAll('.k7p__labels li'), btn = w.querySelector('.k7p__next');
    var ST = [['Besteld', 'We hebben je bestelling om 09:12 ontvangen.'], ['Ingepakt', 'Je koffie is gebrand en ingepakt in Utrecht.'], ['Onderweg', 'De bezorger rijdt, je bent stop 6 van 14.'], ['Bezorgd', 'Om 14:37 afgegeven bij de voordeur.']];
    var p = 1, tm = 0;
    function draw(anim) {
      road.setAttribute('style', '--p:' + p);
      s.innerHTML = '<span class="k7p__s' + (anim ? ' is-in' : '') + '">' + ST[p][0] + '</span>';
      note.textContent = ST[p][1];
      lis.forEach(function (li, i) { li.classList.toggle('is-cur', i === p); if (i === p) li.setAttribute('aria-current', 'step'); else li.removeAttribute('aria-current'); });
      btn.textContent = p < 3 ? 'Volgende status' : 'Opnieuw volgen';
      if (anim && p > 0) { road.classList.remove('is-drive'); void road.offsetWidth; road.classList.add('is-drive'); clearTimeout(tm); tm = setTimeout(function () { road.classList.remove('is-drive'); }, 950); }
    }
    btn.addEventListener('click', function () { p = p < 3 ? p + 1 : 0; draw(true); });
    draw(false);
}
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 →