Laadtekst in stappen New

A price calculation that tells you what is happening while you wait: calculating quote, fetching prices, checking subsidy, each step rolls up with a progress bar, then the price appears. Steps via aria-live, the result receives focus. For calculators, quote modules and searches that take a few seconds.

Prijs voor een hybride warmtepomp

Tussenwoning uit 1978 in Apeldoorn, 118 m², cv-ketel uit 2014

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.

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

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 →