Vergelijkingsbalken: wij en het gemiddelde New
Per attribute two bars side by side: your own company in orange, the regional average in grey, with the value at the end and a note when lower is better. Bars grow when in view; hover or focus on a row states the difference in plain words (13 times faster, 5 years longer). For trades, installers and service providers who want to show their lead with evidence.
Hoogendoorn Dakwerken naast 6 dakdekkers in Den Haag
WijGemiddelde
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.
<!-- Vergelijkingsbalken: wij en het gemiddelde · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="vgb">
<p class="vgb__t">Hoogendoorn Dakwerken<span> naast 6 dakdekkers in Den Haag</span></p>
<ul class="vgb__rows"></ul>
<p class="vgb__ft"><span class="vgb__lg"><i class="vgb__sw"></i>Wij</span><span class="vgb__lg"><i class="vgb__sw vgb__sw--g"></i>Gemiddelde</span><span class="vgb__det" aria-live="polite"></span></p>
</div>
</div>/* Vergelijkingsbalken: wij en het gemiddelde · NedDev · eigen werk. */
.vgb{position:absolute;inset:0;box-sizing:border-box;padding:12px 14px;background:#fff;color:#0a0a0a;font-family:'Switzer',sans-serif;display:flex;flex-direction:column;gap:6px;container-type:inline-size}
.vgb p{margin:0}
.vgb__t{font-size:13px;font-weight:600}
.vgb__t span{font-weight:400;color:#5f5e5a}
.vgb__rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;gap:5px;flex:1;min-height:0}
.vgb__row{display:flex;align-items:center;gap:10px;padding:2px 4px;margin:0 -4px;border-radius:4px;outline:none;transition:background-color .15s}
.vgb__row:hover,.vgb__row:focus-visible{background:#f4f3f1}
.vgb__row:focus-visible{outline:2px solid #F5480F;outline-offset:0}
.vgb__n{flex:0 0 34%;min-width:0;font-size:12px;line-height:1.25;font-weight:600}
.vgb__n small{display:block;font-size:12px;font-weight:400;color:#6b6a66}
.vgb__bars{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vgb__b{display:flex;align-items:center;gap:6px;height:14px}
.vgb__b i{display:block;height:9px;border-radius:2px;background:#F5480F;width:calc((100% - 62px) * var(--v));transform-origin:left;transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--i)*90ms)}
.vgb__b--g i{background:#b9b6b0}
.vgb__b span{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;color:#3d3c39}
.vgb__b:not(.vgb__b--g) span{font-weight:600;color:#0a0a0a}
.vgb.is-in .vgb__b i{transform:none}
.vgb__ft{display:flex;align-items:center;gap:12px;font-size:12px;color:#3d3c39;min-height:16px}
.vgb__lg{display:flex;align-items:center;gap:5px;flex:none}
.vgb__sw{width:10px;height:10px;border-radius:2px;background:#F5480F}
.vgb__sw--g{background:#b9b6b0}
.vgb__det{margin-left:auto;font-weight:600;color:#0a0a0a;text-align:right;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container (max-width:380px){.vgb__t span{display:none}.vgb__n{flex-basis:32%}}
@media(prefers-reduced-motion:reduce){.vgb__b i{transition:none}}// Vergelijkingsbalken: wij en het gemiddelde · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.vgb');if(!w)return;
var R=[{n:'Reactietijd',w:2,g:26,u:'uur',low:1},{n:'Offerte binnen',w:2,g:9,u:'dagen',u1:'dag',low:1},{n:'Garantie',w:15,g:10,u:'jaar'},{n:'Klantcijfer',w:9.1,g:7.8,u:''}];
function f(v,r){var s=(v%1?v.toFixed(1):v+'').replace('.',',');return r.u?s+' '+(v===1&&r.u1?r.u1:r.u):s;}
function verschil(r){if(r.n==='Reactietijd')return Math.round(r.g/r.w)+' keer sneller';if(r.low)return (r.g-r.w)+' dagen eerder';if(r.u==='jaar')return (r.w-r.g)+' jaar langer';return ((r.w-r.g).toFixed(1)).replace('.',',')+' punt hoger';}
var ul=w.querySelector('.vgb__rows'),det=w.querySelector('.vgb__det');
ul.innerHTML=R.map(function(r,i){var m=Math.max(r.w,r.g);return '<li class="vgb__row" tabindex="0" data-i="'+i+'" aria-label="'+r.n+': wij '+f(r.w,r)+', gemiddelde '+f(r.g,r)+(r.low?', lager is beter':'')+'. '+verschil(r)+'."><p class="vgb__n" aria-hidden="true">'+r.n+(r.low?'<small>lager is beter</small>':'')+'</p><div class="vgb__bars" aria-hidden="true"><div class="vgb__b" style="--v:'+(r.w/m).toFixed(3)+';--i:'+i+'"><i></i><span>'+f(r.w,r)+'</span></div><div class="vgb__b vgb__b--g" style="--v:'+(r.g/m).toFixed(3)+';--i:'+i+'"><i></i><span>'+f(r.g,r)+'</span></div></div></li>';}).join('');
var base='Eigen meting 2025';det.textContent=base;det.style.fontWeight='400';
ul.querySelectorAll('.vgb__row').forEach(function(li){var r=R[+li.dataset.i];function on(){det.style.fontWeight='';det.textContent=verschil(r);}function off(){det.style.fontWeight='400';det.textContent=base;}
li.addEventListener('pointerenter',on);li.addEventListener('pointerleave',function(){if(document.activeElement!==li)off();});li.addEventListener('focus',on);li.addEventListener('blur',off);});
if(matchMedia('(prefers-reduced-motion:reduce)').matches||!('IntersectionObserver' in window)){w.classList.add('is-in');}else{var io=new IntersectionObserver(function(es){if(es[0].isIntersecting){w.classList.add('is-in');io.disconnect();}},{threshold:.35});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 →