Laadtekst in stappen Nieuw

<!-- Laadtekst in stappen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="lts">
<div class="lts__card">
<h3 class="lts__t">Prijs voor een hybride warmtepomp</h3>
<p class="lts__w">Tussenwoning uit 1978 in Apeldoorn, 118 m², cv-ketel uit 2014</p>
<div class="lts__vak">
<button class="lts__go" type="button">Bereken mijn prijs</button>
<div class="lts__run" hidden><div class="lts__rij"><span class="lts__ring" aria-hidden="true"></span><div class="lts__roll" aria-live="polite"></div></div><div class="lts__bar" aria-hidden="true"><i></i></div></div>
<div class="lts__res" hidden><p class="lts__prijs" tabindex="-1"><strong>€ 4.850</strong> geplaatst, inclusief btw</p><p class="lts__sub">Na ISDE-subsidie € 2.725 · prijs geldig tot 30 november</p><button class="lts__again" type="button">Opnieuw berekenen</button></div>
</div>
</div>
</div>
</div>

/* Laadtekst in stappen · NedDev · eigen werk. */
.lts{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#f4f3f1;text-align:left}
.lts *{box-sizing:border-box}
.lts__card{width:min(100%,360px);padding:14px 16px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px}
.lts__t{margin:0;font-size:16px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.lts__w{margin:4px 0 0;font-size:12.5px;line-height:1.35;color:#4a4a4a}
.lts__vak{margin-top:12px;min-height:66px;display:flex;flex-direction:column;justify-content:center}
.lts__go,.lts__again{align-self:flex-start;min-height:36px;padding:0 14px;border:1px solid #F5480F;border-radius:4px;background:#F5480F;color:#0a0a0a;font:600 13px/1 'Switzer',system-ui,sans-serif;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.lts__go:hover,.lts__again:hover{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.lts__again{min-height:30px;margin-top:6px;background:#fff;border-color:#0a0a0a;font-size:12.5px}
.lts__go:focus-visible,.lts__again:focus-visible,.lts__prijs:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.lts__rij{display:flex;align-items:center;gap:8px}
.lts__ring{width:14px;height:14px;flex:none;border-radius:50%;border:2px solid #dedad4;border-top-color:#F5480F;animation:ltsDraai .8s linear infinite}
@keyframes ltsDraai{to{transform:rotate(360deg)}}
.lts__roll{position:relative;flex:1;height:20px;overflow:hidden;font-size:13.5px;font-weight:500}
.lts__regel{position:absolute;left:0;top:0;line-height:20px;white-space:nowrap;transition:transform .32s cubic-bezier(.3,.7,.2,1),opacity .32s}
.lts__regel.is-in{transform:translateY(100%);opacity:0}
.lts__regel.is-uit{transform:translateY(-100%);opacity:0}
.lts__bar{margin-top:10px;height:4px;background:#ece9e4;border-radius:4px;overflow:hidden}
.lts__bar i{display:block;height:100%;width:0;background:#0a0a0a;transition:width .8s linear}
.lts__prijs{margin:0;font-size:13px;color:#3a3a3a}
.lts__prijs strong{font-size:20px;color:#0a0a0a;font-variant-numeric:tabular-nums;margin-right:4px}
.lts__sub{margin:2px 0 0;font-size:12px;color:#4a4a4a}
@media (prefers-reduced-motion:reduce){.lts__regel,.lts__bar i{transition:none}.lts__ring{animation:none;border-color:#F5480F}}

// Laadtekst in stappen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.lts'), go = w.querySelector('.lts__go'), run = w.querySelector('.lts__run'), res = w.querySelector('.lts__res');
    var roll = w.querySelector('.lts__roll'), bar = w.querySelector('.lts__bar i'), again = w.querySelector('.lts__again'), prijs = w.querySelector('.lts__prijs');
    var rm = matchMedia('(prefers-reduced-motion: reduce)').matches;
    var S = ['Offerte berekenen…', 'Prijzen ophalen bij drie leveranciers…', 'Subsidie voor Apeldoorn controleren…', 'Eerste montagedatum zoeken…'];
    var timers = [];
    function step(i) {
      var old = roll.querySelector('.lts__regel:not(.is-uit)');
      var n = document.createElement('span'); n.className = 'lts__regel' + (rm ? '' : ' is-in'); n.textContent = S[i];
      roll.appendChild(n);
      if (old) { old.classList.add('is-uit'); old.setAttribute('aria-hidden', 'true'); setTimeout(function () { old.remove(); }, 340); }
      requestAnimationFrame(function () { requestAnimationFrame(function () { n.classList.remove('is-in'); }); });
      bar.style.width = ((i + 1) / S.length * 100) + '%';
    }
    function start() {
      go.hidden = true; res.hidden = true; run.hidden = false; roll.innerHTML = ''; bar.style.transition = 'none'; bar.style.width = '0'; bar.offsetWidth; bar.style.transition = '';
      S.forEach(function (_, i) { timers.push(setTimeout(function () { step(i); }, i * 900)); });
      timers.push(setTimeout(function () { run.hidden = true; res.hidden = false; prijs.focus(); }, S.length * 900 + 200));
    }
    go.addEventListener('click', start);
    again.addEventListener('click', function () { timers.forEach(clearTimeout); timers = []; start(); });
}
init(document.querySelector('.jouw-container'));