Preloader Tiles Nieuw

<!-- Preloader Tiles · Bron: Animata · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="plt"><div class="plt__hero"><span class="plt__eye">Interieurontwerp · Utrecht</span><h3 class="plt__h">Studio Wolk</h3><p class="plt__p">Woningen en werkplekken die rust geven.</p><span class="plt__blk"></span></div><div class="plt__tiles" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><span class="plt__count">0</span></div><button class="plt__again" type="button">Opnieuw</button></div>
</div>

/* Preloader Tiles · Bron: Animata · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.plt{position:absolute;inset:0;overflow:hidden;font-family:'Switzer',system-ui,sans-serif;background:#f4f3f1}
.plt__hero{position:absolute;inset:0;padding:22px 24px;display:flex;flex-direction:column;justify-content:flex-end;color:#0a0a0a}
.plt__eye{font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#F5480F}
.plt__h{font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(24px,7.5vw,34px);line-height:1.15;margin:10px 0 8px;letter-spacing:-.01em}
.plt__p{margin:0;font-size:13px;color:rgba(10,10,10,.65);max-width:60%}
.plt__blk{position:absolute;right:22px;top:20px;width:34%;height:52%;background:#F5480F;border-radius:3px}
.plt__blk::after{content:'';position:absolute;left:-18%;bottom:-14%;width:46%;height:46%;background:#0a0a0a;border-radius:50%}
.plt__tiles{position:absolute;inset:0;display:flex;z-index:2}
.plt__tiles i{flex:1;background:#0a0a0a;margin-right:-1px;transform:translateY(0)}
.plt__count{position:absolute;left:22px;bottom:16px;font-family:'Boldonse','Switzer',sans-serif;font-size:40px;line-height:1.2;color:#F5480F;font-variant-numeric:tabular-nums}
.plt.is-out .plt__tiles i{transform:translateY(-101%);transition:transform .7s cubic-bezier(.76,0,.24,1)}
.plt.is-out .plt__count{opacity:0;transition:opacity .2s}
.plt__again{position:absolute;right:12px;bottom:12px;z-index:3;font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;background:#fff;color:#0a0a0a;border:1px solid rgba(10,10,10,.18);border-radius:999px;padding:8px 12px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}
.plt.is-done .plt__again{opacity:1;pointer-events:auto}
.plt__again:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.plt.is-out .plt__tiles i{transform:none;opacity:0;transition:opacity .3s}}

// Preloader Tiles · Bron: Animata · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.plt'); if (!w) return;
    var tiles = [].slice.call(w.querySelectorAll('.plt__tiles i')), cnt = w.querySelector('.plt__count'), again = w.querySelector('.plt__again');
    var reduce = matchMedia('(prefers-reduced-motion:reduce)').matches, timer = 0;
    tiles.forEach(function (t, i) { t.style.transitionDelay = (i * 55) + 'ms'; });
    function play() {
      clearTimeout(timer); w.classList.remove('is-out', 'is-done'); cnt.textContent = '0';
      var t0 = performance.now(), D = reduce ? 1 : 1000;
      (function step(now) {
        var p = Math.min(1, (now - t0) / D); var e = 1 - Math.pow(1 - p, 3);
        cnt.textContent = String(Math.round(e * 100));
        if (p < 1) requestAnimationFrame(step);
        else { w.classList.add('is-out'); timer = setTimeout(function () { w.classList.add('is-done'); }, reduce ? 300 : 1100); }
      })(t0);
    }
    again.addEventListener('click', function () { tiles.forEach(function (t) { t.style.transition = 'none'; }); w.classList.remove('is-out'); void w.offsetWidth; tiles.forEach(function (t) { t.style.transition = ''; }); play(); });
    play();
}
init(document.querySelector('.jouw-container'));