Newton-wieg als laadindicator New

While a price is calculated, the balls of a Newton's cradle click back and forth with a real pendulum motion (fast at the bottom, slow at the turn). The steps appear in a live region; at the end the cradle comes to rest and the result appears. For a calculator of an insulation company, mortgage adviser or insurer. With reduced motion the cradle stays still and only the steps run.

Dakisolatie, 42 m²

Hellend dak in Zoetermeer, isoleren aan de binnenkant.

How to use it

Paste the HTML where the components 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.

<!-- Newton-wieg als laadindicator · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="fyn">
<svg class="fyn__wieg" viewBox="0 0 200 140" aria-hidden="true">
<path class="fyn__frame" d="M24 128 L32 16 L168 16 L176 128 M12 128 L188 128"/>
<g class="fyn__p"><line x1="56" y1="16" x2="56" y2="92"/><circle cx="56" cy="102" r="11"/></g>
<g class="fyn__p"><line x1="78" y1="16" x2="78" y2="92"/><circle cx="78" cy="102" r="11"/></g>
<g class="fyn__p"><line x1="100" y1="16" x2="100" y2="92"/><circle cx="100" cy="102" r="11"/></g>
<g class="fyn__p"><line x1="122" y1="16" x2="122" y2="92"/><circle cx="122" cy="102" r="11"/></g>
<g class="fyn__p"><line x1="144" y1="16" x2="144" y2="92"/><circle cx="144" cy="102" r="11"/></g>
</svg>
<div class="fyn__tekst">
<h3 class="fyn__h">Dakisolatie, 42 m²</h3>
<p class="fyn__p2">Hellend dak in Zoetermeer, isoleren aan de binnenkant.</p>
<button class="fyn__knop" type="button">Bereken mijn prijs</button>
<p class="fyn__st" aria-live="polite"></p>
</div>
</div>
</div>

/* Newton-wieg als laadindicator · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.fyn{position:absolute;inset:0;display:flex;align-items:center;gap:14px;padding:14px 16px;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;text-align:left}
.fyn *{box-sizing:border-box}
.fyn__wieg{flex:0 0 46%;width:46%;height:auto;max-height:100%;overflow:visible}
.fyn__frame{fill:none;stroke:#0a0a0a;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.fyn__p line{stroke:#0a0a0a;stroke-width:1.2}
.fyn__p circle{fill:#0a0a0a}
.fyn__p:first-of-type circle,.fyn__p:last-of-type circle{fill:#F5480F}
.fyn__tekst{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.fyn__h{margin:0;font:700 18px/1.15 'Switzer',sans-serif;letter-spacing:-.015em}
.fyn__p2{margin:0;font:400 13px/1.4 'Switzer',sans-serif;color:#3d3b37}
.fyn__knop{margin-top:4px;padding:10px 13px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 13px/1 'Switzer',sans-serif;cursor:pointer;transition:background-color .16s,color .16s}
.fyn__knop:hover{background:#F5480F;color:#0a0a0a}
.fyn__knop[aria-disabled="true"]{background:#5c5a56;cursor:progress}
.fyn__knop:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.fyn__st{margin:0;min-height:36px;font:500 13px/1.35 'Switzer',sans-serif}

// Newton-wieg als laadindicator · © 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 el=root.querySelector('.fyn');if(!el)return;
var RM=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var g=[].slice.call(el.querySelectorAll('.fyn__p')),btn=el.querySelector('.fyn__knop'),st=el.querySelector('.fyn__st');
var X=[56,78,100,122,144],raf=0,t0=0,bezig=false,stopT=0,A=34,timers=[];
function zet(i,a){g[i].setAttribute('transform',a?'rotate('+a.toFixed(2)+' '+X[i]+' 16)':'');}
function frame(t){var s=(t-t0)/1000,P=.46,u=(s%(2*P))/P,amp=A;
if(stopT){amp=A*Math.max(0,1-(t-stopT)/1100);}
var aL=0,aR=0;if(u<1)aL=-amp*Math.sin(Math.PI*u);else aR=amp*Math.sin(Math.PI*(u-1));
zet(0,aL);zet(4,aR);var tik=Math.max(0,1-Math.min(u%1,1-(u%1))*14)*amp*.04;zet(1,u<1?-tik:0);zet(3,u>=1?tik:0);
if(stopT&&amp<=.3){g.forEach(function(_,i){zet(i,0);});raf=0;return;}raf=requestAnimationFrame(frame);}
var STAP=['Dakoppervlak en hellingshoek nagaan.','Isolatiedikte kiezen voor Rc 6,3.','ISDE-subsidie meerekenen.'];
btn.addEventListener('click',function(){if(bezig)return;bezig=true;btn.setAttribute('aria-disabled','true');el.setAttribute('aria-busy','true');
st.textContent=STAP[0];if(!RM){stopT=0;t0=performance.now();if(!raf)raf=requestAnimationFrame(frame);}
timers.push(setTimeout(function(){st.textContent=STAP[1];},1300));
timers.push(setTimeout(function(){st.textContent=STAP[2];},2600));
timers.push(setTimeout(function(){stopT=performance.now();bezig=false;btn.removeAttribute('aria-disabled');el.removeAttribute('aria-busy');btn.textContent='Opnieuw berekenen';
st.textContent='Indicatie € 2.340, na ISDE-subsidie ongeveer € 1.680.';},3900));});
}
init(document.querySelector('.jouw-container'));

More components

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 →