Inzamelactie als golvende vulling New

The progress of a fundraiser as water in a round jar: two waves sway over each other and the level rises as the amount goes up. With a real progressbar for screen readers and an announcement on every donation. For a sports club, school or neighbourhood association raising money, or a local crowdfunding page.

Veldverlichting voor VV Rood-Wit in Haarlem

€ 14.360 van € 20.000

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.

<!-- 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'));

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 →