Inzamelactie als golvende vulling Nieuw

<!-- Inzamelactie als golvende vulling · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="r7gc">
<div class="r7gc__pot" role="progressbar" aria-label="Opgehaald voor de nieuwe veldverlichting" aria-valuemin="0" aria-valuemax="20000" aria-valuenow="14360" aria-valuetext="€ 14.360 van € 20.000">
<svg class="r7gc__svg" viewBox="0 0 120 120" aria-hidden="true" focusable="false">
<defs><clipPath id="r7gc-clip"><circle cx="60" cy="60" r="53"/></clipPath></defs>
<circle cx="60" cy="60" r="53" class="r7gc__bg"/>
<g clip-path="url(#r7gc-clip)"><g class="r7gc__peil" transform="translate(0 114)">
<g class="r7gc__g2"><path class="r7gc__w2" d="M0 6Q15 0 30 6T60 6T90 6T120 6T150 6T180 6T210 6T240 6V140H0Z"/></g>
<g class="r7gc__g1"><path class="r7gc__w1" d="M0 6Q15 12 30 6T60 6T90 6T120 6T150 6T180 6T210 6T240 6V140H0Z"/></g>
</g></g>
<circle cx="60" cy="60" r="56" class="r7gc__rand"/>
<text x="60" y="68" class="r7gc__pct">0%</text>
</svg>
</div>
<div class="r7gc__txt">
<p class="r7gc__h">Veldverlichting voor VV Rood-Wit in Haarlem</p>
<p class="r7gc__bedrag"><strong class="r7gc__nu">€ 14.360</strong> van € 20.000</p>
<button class="r7gc__knop" type="button">€ 25 doneren</button>
<p class="r7gc__m" aria-live="polite"></p>
</div>
</div>
</div>

/* Inzamelactie als golvende vulling · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.r7gc{position:absolute;inset:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;padding:16px 20px;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.r7gc *,.r7gc *::before,.r7gc *::after{box-sizing:border-box}
.r7gc__pot{width:min(42cqi,76cqh,180px);aspect-ratio:1}
.r7gc__svg{display:block;width:100%;height:100%}
.r7gc__bg{fill:#fff}
.r7gc__rand{fill:none;stroke:#0a0a0a;stroke-width:1.5}
.r7gc__w1{fill:#F5480F}
.r7gc__w2{fill:#f9a07f}
.r7gc__g1{animation:r7gc-schuif 3.2s linear infinite}
.r7gc__g2{animation:r7gc-schuif 5s linear infinite reverse}
@keyframes r7gc-schuif{from{transform:translateX(0)}to{transform:translateX(-60px)}}
.r7gc__pct{font:700 24px 'Switzer',sans-serif;text-anchor:middle;fill:#0a0a0a;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.r7gc__txt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.r7gc__h{margin:0;font:600 clamp(14px,4.6cqi,19px)/1.2 'Switzer',sans-serif;letter-spacing:-.01em;text-wrap:balance}
.r7gc__bedrag{margin:0;font:400 14px/1.3 'Switzer',sans-serif;color:#45433f}
.r7gc__nu{font-weight:700;color:#0a0a0a;font-variant-numeric:tabular-nums}
.r7gc__knop{margin-top:4px;min-height:36px;padding:9px 14px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 14px/1 'Switzer',sans-serif;cursor:pointer;transition:background-color .16s}
.r7gc__knop:hover{background:#2a2826}
.r7gc__knop:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.r7gc__knop:disabled{background:#8a8781;cursor:default}
.r7gc__m{margin:0;min-height:16px;font:400 12px/1.3 'Switzer',sans-serif;color:#45433f}
@media (prefers-reduced-motion:reduce){.r7gc__g1,.r7gc__g2{animation:none}}

// Inzamelactie als golvende vulling · © 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('.r7gc');if(!w)return;
var rm=window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches;
var pot=w.querySelector('.r7gc__pot'),peil=w.querySelector('.r7gc__peil'),pct=w.querySelector('.r7gc__pct'),nu=w.querySelector('.r7gc__nu'),knop=w.querySelector('.r7gc__knop'),m=w.querySelector('.r7gc__m');
var DOEL=20000,bedrag=14360,toon=0,raf=0;
function eur(n){return '€ '+Math.round(n).toLocaleString('nl-NL');}
function zet(v){var p=v/DOEL;peil.setAttribute('transform','translate(0 '+(112-p*106).toFixed(2)+')');pct.textContent=Math.round(p*100)+'%';nu.textContent=eur(v);}
function naar(v){
  pot.setAttribute('aria-valuenow',v);pot.setAttribute('aria-valuetext',eur(v)+' van € 20.000');
  if(rm){toon=v;zet(v);return;}
  if(raf)cancelAnimationFrame(raf);var van=toon,t0=performance.now(),dur=v-van>2000?1600:700;
  (function stap(t){var p=Math.min(1,(t-t0)/dur),e=1-Math.pow(1-p,3);toon=van+(v-van)*e;zet(toon);if(p<1)raf=requestAnimationFrame(stap);})(t0);
}
knop.addEventListener('click',function(){
  bedrag=Math.min(DOEL,bedrag+25);naar(bedrag);
  if(bedrag>=DOEL){knop.disabled=true;knop.textContent='Doel gehaald';m.textContent='Het doel is gehaald, dank je wel.';}
  else m.textContent='Dank je wel. Nog '+eur(DOEL-bedrag)+' te gaan.';
});
zet(0);
if('IntersectionObserver' in window){var io=new IntersectionObserver(function(e){if(e[0].isIntersecting){io.disconnect();naar(bedrag);}},{threshold:.4});io.observe(w);}else naar(bedrag);
}
init(document.querySelector('.jouw-container'));