Optellende cijfers

Key figures count up to their target with an easing curve once in view, in Dutch number format; for results and proof.

0opgeleverde keukens

0beveelt ons aan

0omzet 2025

How to use it

Paste the HTML where the numbers & charts 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.

<!-- Optellende cijfers · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-cnt"><div class="ei-cnt__i"><b data-to="1284">0</b><span>opgeleverde keukens</span></div><div class="ei-cnt__i"><b data-to="98" data-suf="%">0</b><span>beveelt ons aan</span></div><div class="ei-cnt__i"><b data-to="2.4" data-dec="1" data-pre="€ " data-suf=" mln">0</b><span>omzet 2025</span></div></div>
</div>

/* Optellende cijfers · NedDev · eigen werk. */
.ei-cnt{display:grid;grid-template-columns:repeat(3,1fr);gap:0;width:88%;border-top:1px solid #0a0a0a}
.ei-cnt__i{padding:16px 10px 0 0;display:flex;flex-direction:column;gap:6px}
.ei-cnt__i+.ei-cnt__i{padding-left:12px;border-left:1px solid rgba(10,10,10,.15)}
.ei-cnt__i b{font-family:'Switzer',sans-serif;font-weight:800;font-size:clamp(22px,4vw,32px);letter-spacing:-.03em;color:#0a0a0a;font-variant-numeric:tabular-nums;white-space:nowrap}
.ei-cnt__i:first-child b{color:#F5480F}
.ei-cnt__i span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(10,10,10,.55);line-height:1.4}

// Optellende cijfers · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-cnt'),els=[].slice.call(w.querySelectorAll('b[data-to]'));
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
function fmt(el,v){var d=+(el.dataset.dec||0);return (el.dataset.pre||'')+v.toLocaleString('nl-NL',{minimumFractionDigits:d,maximumFractionDigits:d})+(el.dataset.suf||'');}
function run(){var t0=performance.now(),dur=1800;
  (function tick(now){var p=Math.min(1,(now-t0)/dur),e=p===1?1:1-Math.pow(2,-10*p);
    els.forEach(function(el){var to=+el.dataset.to,d=+(el.dataset.dec||0);var v=to*e;v=d?Math.round(v*Math.pow(10,d))/Math.pow(10,d):Math.round(v);el.textContent=fmt(el,v);});
    if(p<1)requestAnimationFrame(tick);})(t0);}
els.forEach(function(el){el.textContent=fmt(el,reduce?+el.dataset.to:0);});
if(!reduce){var io=new IntersectionObserver(function(es){if(es[0].isIntersecting){run();io.disconnect();}},{threshold:.5});io.observe(w);}
}
init(document.querySelector('.jouw-container'));

More numbers & charts

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 →