Infographic: doorlooptijd op schaal Nieuw

<!-- Infographic: doorlooptijd op schaal · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ifg">
<p class="ifg__t">Waterschade in Leiden: 21 dagen tot uitbetaling</p>
<div class="ifg__track"><div class="ifg__line"><i class="ifg__fill"></i></div>
<div class="ifg__tabs" role="tablist" aria-label="Momenten in het dossier">
<button type="button" role="tab" class="ifg__pt is-dn" style="--x:0;--tx:0%;--dl:0px" aria-selected="false" tabindex="-1" data-k="0"><span class="ifg__d">Dag 1</span><span class="ifg__l">Melding</span></button>
<button type="button" role="tab" class="ifg__pt is-up" style="--x:5;--tx:0%;--dl:0px" aria-selected="false" tabindex="-1" data-k="1"><span class="ifg__d">Dag 2</span><span class="ifg__l">Expert langs</span></button>
<button type="button" role="tab" class="ifg__pt is-dn" style="--x:40;--tx:-50%;--dl:50%" aria-selected="false" tabindex="-1" data-k="2"><span class="ifg__d">Dag 9</span><span class="ifg__l">Rapport</span></button>
<button type="button" role="tab" class="ifg__pt is-up" style="--x:100;--tx:-100%;--dl:100%" aria-selected="true" tabindex="0" data-k="3"><span class="ifg__d">Dag 21</span><span class="ifg__l">Uitbetaling</span></button>
</div></div>
<div class="ifg__panel" role="tabpanel"><p class="ifg__pt2"></p><p class="ifg__body"></p></div>
<p class="ifg__f">12 van de 21 dagen ligt het dossier bij de verzekeraar.</p>
</div>
</div>

/* Infographic: doorlooptijd op schaal · NedDev · eigen werk. */
.ifg{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;justify-content:center;gap:6px;container-type:inline-size}
.ifg p{margin:0}
.ifg__t{font-size:13px;font-weight:600;line-height:1.3}
.ifg__track{position:relative;height:88px;margin:0 6px;flex:none}
.ifg__line{position:absolute;left:0;right:0;top:43px;height:2px;background:#e3e1dd}
.ifg__fill{position:absolute;inset:0;background:#F5480F;transform-origin:left;transform:scaleX(var(--p,1))}
.ifg__pt{position:absolute;left:calc(var(--x)*1%);transform:translateX(var(--tx));display:flex;flex-direction:column;align-items:flex-start;min-height:34px;padding:2px 4px;border:0;border-radius:4px;background:none;color:#0a0a0a;font-family:'Switzer',sans-serif;text-align:left;cursor:pointer;white-space:nowrap}
.ifg__pt[style*="-50%"]{align-items:center;text-align:center}
.ifg__pt[style*="-100%"]{align-items:flex-end;text-align:right}
.ifg__pt.is-up{top:0}.ifg__pt.is-dn{top:52px}
.ifg__pt::after{content:'';position:absolute;left:calc(var(--dl) - 5px);width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid #b9b6b0;transition:background-color .2s,border-color .2s,transform .2s}
.ifg__pt.is-up::after{top:37px}.ifg__pt.is-dn::after{top:-15px}
.ifg__pt.is-on::after{border-color:#F5480F}
.ifg__pt[aria-selected="true"]::after{background:#F5480F;border-color:#F5480F;transform:scale(1.25)}
.ifg__d{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:#6b6a66}
.ifg__l{font-size:12px;color:#3d3c39}
.ifg__pt[aria-selected="true"] .ifg__d{color:#c23a0b}
.ifg__pt[aria-selected="true"] .ifg__l{color:#0a0a0a;font-weight:600}
.ifg__pt:hover .ifg__l{text-decoration:underline;text-underline-offset:2px}
.ifg__pt:focus-visible{outline:2px solid #F5480F;outline-offset:1px}
.ifg__panel{min-height:46px;padding-top:6px;border-top:1px solid #eeece9}
.ifg__pt2{font-size:13px;font-weight:600}
.ifg__body{font-size:12px;line-height:1.4;color:#3d3c39}
.ifg__f{font-size:12px;color:#6b6a66}
@container (max-width:380px){.ifg__f{display:none}}
@media(prefers-reduced-motion:reduce){.ifg__pt::after{transition:none}}

// Infographic: doorlooptijd op schaal · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ifg');if(!w)return;
var P=[{d:1,t:'Dag 1 · melding',b:"Foto's en polisnummer via WhatsApp gestuurd, dossier binnen 20 minuten aangemaakt."},
{d:2,t:'Dag 2 · expert langs',b:'Schade opgemeten: 14 m² vloer en twee muren tot 60 cm hoog vochtig.'},
{d:9,t:'Dag 9 · rapport naar verzekeraar',b:'Begroting € 8.640, inclusief drogen, nieuwe ondervloer en stucwerk.'},
{d:21,t:'Dag 21 · uitbetaling',b:'€ 8.240 op de rekening: begroting min € 400 eigen risico.'}];
var tabs=[].slice.call(w.querySelectorAll('.ifg__pt')),fill=w.querySelector('.ifg__fill'),pt=w.querySelector('.ifg__pt2'),body=w.querySelector('.ifg__body'),panel=w.querySelector('.ifg__panel'),raf=0;
var pid='ifg-'+Math.random().toString(36).slice(2,7);tabs.forEach(function(t,i){t.id=pid+'-'+i;t.setAttribute('aria-controls',pid+'-p');});panel.id=pid+'-p';
function show(k,focus){tabs.forEach(function(t,i){var on=i===k;t.setAttribute('aria-selected',on?'true':'false');t.tabIndex=on?0:-1;});panel.setAttribute('aria-labelledby',tabs[k].id);pt.textContent=P[k].t;body.textContent=P[k].b;if(focus)tabs[k].focus();}
function reach(p){var day=1+p*20;tabs.forEach(function(t,i){t.classList.toggle('is-on',P[i].d<=day+.01);});fill.style.setProperty('--p',p);}
function stop(){if(raf){cancelAnimationFrame(raf);raf=0;}reach(1);}
tabs.forEach(function(t,i){t.addEventListener('click',function(){stop();show(i);});t.addEventListener('keydown',function(e){var k=e.key,j=k==='ArrowRight'?i+1:k==='ArrowLeft'?i-1:k==='Home'?0:k==='End'?3:null;if(j===null)return;e.preventDefault();stop();show((j+4)%4,true);});});
show(3);reach(1);
if(matchMedia('(prefers-reduced-motion:reduce)').matches||!('IntersectionObserver' in window))return;
reach(0);show(0);
function run(){var t0=performance.now(),last=0;raf=requestAnimationFrame(function f(t){var p=Math.min(1,(t-t0)/2600),e=p<.5?2*p*p:1-Math.pow(-2*p+2,2)/2;reach(e);var day=1+e*20,k=0;P.forEach(function(x,i){if(x.d<=day+.01)k=i;});if(k!==last){last=k;show(k);}if(p<1)raf=requestAnimationFrame(f);else raf=0;});}
var io=new IntersectionObserver(function(es){if(es[0].isIntersecting){io.disconnect();setTimeout(run,300);}},{threshold:.5});io.observe(w);
}
init(document.querySelector('.jouw-container'));