Newton-wieg als laadindicator Nieuw

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