Inzameling: voortgang naar een doel Nieuw

<!-- Inzameling: voortgang naar een doel · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="inz">
<p class="inz__t">Ledverlichting hoofdveld · VV Zwervers, Zwolle</p>
<p class="inz__sum"><b class="inz__amt">€ 16.870</b> <span>opgehaald van € 24.000</span></p>
<div class="inz__bar" role="progressbar" aria-label="Opgehaald" aria-valuemin="0" aria-valuemax="24000" aria-valuenow="16870" aria-valuetext="€ 16.870 van € 24.000"><i class="inz__fill"></i><i class="inz__mk" style="--x:33.333%" data-v="8000"></i><i class="inz__mk" style="--x:66.667%" data-v="16000"></i></div>
<div class="inz__mls" aria-hidden="true"><span style="--x:33.333%" data-v="8000">€ 8.000 masten</span><span style="--x:66.667%" data-v="16000">€ 16.000 lampen</span><span style="--x:100%" data-v="24000">€ 24.000 klaar</span></div>
<p class="inz__meta"><span class="inz__don">287</span> donateurs · nog 18 dagen</p>
<div class="inz__give" role="group" aria-label="Kies een bedrag"><button type="button" class="inz__opt" aria-pressed="false" data-a="10">€ 10</button><button type="button" class="inz__opt" aria-pressed="true" data-a="25">€ 25</button><button type="button" class="inz__opt" aria-pressed="false" data-a="50">€ 50</button><button type="button" class="inz__go">Doneer € 25</button></div>
<p class="inz__msg" aria-live="polite">Voorbeeld: er wordt niets afgeschreven.</p>
</div>
</div>

/* Inzameling: voortgang naar een doel · NedDev · eigen werk. */
.inz{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:5px;container-type:inline-size}
.inz p{margin:0}
.inz__t{font-size:13px;font-weight:600}
.inz__sum{font-size:12px;color:#5f5e5a}
.inz__amt{font-size:26px;font-weight:600;color:#0a0a0a;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.inz__bar{position:relative;height:10px;border-radius:4px;background:#eeece9;overflow:hidden;margin-top:2px}
.inz__fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:#F5480F;border-radius:4px;transform-origin:left;transform:scaleX(var(--p,0));transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.inz__mk{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff}
.inz__mls{position:relative;height:16px;font-size:12px;color:#8a8883}
.inz__mls span{position:absolute;left:var(--x);transform:translateX(-100%);padding-right:2px;white-space:nowrap;transition:color .3s}
.inz__mls span.is-on{color:#c23a0b;font-weight:600}
.inz__meta{font-size:12px;color:#3d3c39}
.inz__don{font-weight:600;font-variant-numeric:tabular-nums}
.inz__give{display:flex;gap:4px;margin-top:3px}
.inz__opt,.inz__go{min-height:30px;border-radius:4px;font:600 12px 'Switzer',sans-serif;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,transform .1s}
.inz__opt{min-width:44px;padding:0 8px;border:1px solid #d6d3ce;background:#fff;color:#0a0a0a}
.inz__opt:hover{border-color:#0a0a0a}
.inz__opt[aria-pressed="true"]{border-color:#0a0a0a;background:#0a0a0a;color:#fff}
.inz__go{flex:1;margin-left:4px;padding:0 10px;border:1px solid #F5480F;background:#F5480F;color:#0a0a0a}
.inz__go:hover{background:#e03e08;border-color:#e03e08}
.inz__go:active{transform:scale(.98)}
.inz__opt:focus-visible,.inz__go:focus-visible{outline:2px solid #0a0a0a;outline-offset:2px}
.inz__msg{font-size:12px;color:#6b6a66;min-height:16px}
.inz__msg.is-ok{color:#0a0a0a;font-weight:600}
@container (max-width:380px){.inz__amt{font-size:22px}.inz__opt{min-width:40px;padding:0 6px}}
@media(prefers-reduced-motion:reduce){.inz__fill,.inz__mls span,.inz__go{transition:none}}

// Inzameling: voortgang naar een doel · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.inz');if(!w)return;
var GOAL=24000,sum=16870,don=287,amt=25,reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;
var fill=w.querySelector('.inz__fill'),bar=w.querySelector('.inz__bar'),amtEl=w.querySelector('.inz__amt'),donEl=w.querySelector('.inz__don'),msg=w.querySelector('.inz__msg'),go=w.querySelector('.inz__go'),opts=[].slice.call(w.querySelectorAll('.inz__opt')),labs=[].slice.call(w.querySelectorAll('.inz__mls span'));
var NM={8000:'nieuwe masten',16000:'ledlampen',24000:'aansluiten en keuren'};
function eur(v){return '€ '+Math.round(v).toLocaleString('nl-NL');}
function setBar(v){fill.style.setProperty('--p',Math.min(1,v/GOAL));labs.forEach(function(l){l.classList.toggle('is-on',v>=+l.dataset.v);});}
function aria(){bar.setAttribute('aria-valuenow',Math.min(sum,GOAL));bar.setAttribute('aria-valuetext',eur(sum)+' van '+eur(GOAL));}
function count(from,to){if(reduce){amtEl.textContent=eur(to);return;}var t0=performance.now();requestAnimationFrame(function f(t){var q=Math.min(1,(t-t0)/800),e=1-Math.pow(1-q,3);amtEl.textContent=eur(from+(to-from)*e);if(q<1)requestAnimationFrame(f);});}
opts.forEach(function(b){b.addEventListener('click',function(){amt=+b.dataset.a;opts.forEach(function(x){x.setAttribute('aria-pressed',x===b?'true':'false');});go.textContent='Doneer '+eur(amt);});});
go.addEventListener('click',function(){var old=sum;sum+=amt;don++;donEl.textContent=don.toLocaleString('nl-NL');count(old,sum);setBar(sum);aria();
var hit=null;[8000,16000,24000].forEach(function(m){if(old<m&&sum>=m)hit=m;});var rest=GOAL-sum;msg.classList.add('is-ok');
if(hit===24000)msg.textContent='Bedankt! Het doel is gehaald, de lampen komen er.';else if(hit)msg.textContent='Bedankt! Mijlpaal '+eur(hit)+' gehaald: '+NM[hit]+'.';else if(rest>0){var nx=[8000,16000,24000].filter(function(m){return m>sum;})[0];msg.textContent='Bedankt! Nog '+eur(nx-sum)+' tot '+NM[nx]+'.';}else msg.textContent='Bedankt! Al '+eur(sum)+' opgehaald.';});
if(reduce||!('IntersectionObserver' in window)){setBar(sum);return;}
var io=new IntersectionObserver(function(es){if(es[0].isIntersecting){io.disconnect();setBar(sum);}},{threshold:.4});io.observe(w);
}
init(document.querySelector('.jouw-container'));