Preloader met teller, logo naar header Nieuw

<!-- Preloader met teller, logo naar header · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="plt"><div class="plt__site" aria-busy="true">
<div class="plt__hd" role="banner"><a class="plt__logo" href="#" aria-label="Kade Interieur, naar home">KADE</a><nav class="plt__nav" aria-label="Hoofdmenu"><a href="#">Projecten</a><a href="#">Werkplaats</a><a href="#">Contact</a></nav></div>
<div class="plt__hero"><p class="plt__k">[ Interieurbouw · Zaandam ]</p><h4 class="plt__h">Kasten, keukens en balies, op maat gemaakt in eigen werkplaats.</h4>
<button class="plt__again" type="button">Opnieuw afspelen</button></div></div>
<div class="plt__ld" aria-hidden="true"><div class="plt__bg"></div><span class="plt__big">KADE</span><span class="plt__n">000</span><span class="plt__bar"><i></i></span></div>
<p class="plt__sr" role="status"></p></div>
</div>

/* Preloader met teller, logo naar header · NedDev · eigen werk. */
.plt{position:absolute;inset:0;background:#efe9e0;color:#1c1a17;font-family:'Switzer',system-ui,sans-serif;overflow:hidden;container-type:size}
.plt__site{position:absolute;inset:0;display:flex;flex-direction:column}
.plt__hd{display:flex;align-items:center;justify-content:space-between;padding:12px 14px}
.plt__logo{font:800 16px/1 'Switzer',sans-serif;letter-spacing:.14em;color:#1c1a17;text-decoration:none}
.plt.is-laden .plt__logo{visibility:hidden}
.plt__nav{display:flex;gap:12px}
.plt__nav a{font:500 12px 'Switzer',sans-serif;color:#1c1a17;text-decoration:none;transition:color .18s}
.plt__nav a:hover{color:#b8330a}
.plt a:focus-visible,.plt button:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.plt__hero{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:0 14px 16px;gap:8px}
.plt__k{margin:0;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#6b645a}
.plt__h{margin:0;font:700 clamp(17px,6cqi,38px)/1.06 'Switzer',sans-serif;letter-spacing:-.025em;max-width:20ch}
.plt__again{align-self:flex-start;font:600 11px/1 'Switzer',sans-serif;padding:8px 12px;border-radius:999px;border:1px solid #1c1a17;background:transparent;color:#1c1a17;cursor:pointer;transition:background .18s,color .18s}
.plt__again:hover{background:#1c1a17;color:#efe9e0}
.plt__again:disabled{opacity:.4;cursor:wait}
.plt__ld{position:absolute;inset:0;display:none;z-index:5}
.plt.is-laden .plt__ld{display:block}
.plt__bg{position:absolute;inset:0;background:#1c1a17}
.plt__big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 clamp(34px,15cqi,96px)/1 'Switzer',sans-serif;letter-spacing:.14em;color:#efe9e0;transform-origin:0 0;white-space:nowrap}
.plt__n{position:absolute;right:14px;bottom:12px;font:500 clamp(22px,9cqi,56px)/1 'JetBrains Mono',monospace;color:#efe9e0;font-variant-numeric:tabular-nums}
.plt__bar{position:absolute;left:14px;bottom:14px;width:34%;height:2px;background:rgba(239,233,224,.2)}
.plt__bar i{display:block;height:100%;width:0;background:#F5480F}
.plt__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}

// Preloader met teller, logo naar header · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.plt')||root;
var site=root.querySelector('.plt__site'),ld=root.querySelector('.plt__ld'),bg=root.querySelector('.plt__bg'),big=root.querySelector('.plt__big'),num=root.querySelector('.plt__n'),bar=root.querySelector('.plt__bar i'),logo=root.querySelector('.plt__logo'),again=root.querySelector('.plt__again'),sr=root.querySelector('.plt__sr');
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches,KEY='neddev-lab-preloader-gezien';
function gezien(){try{return sessionStorage.getItem(KEY)==='1';}catch(e){return false;}}
function onthoud(){try{sessionStorage.setItem(KEY,'1');}catch(e){}}
function klaar(){root.classList.remove('is-laden');site.setAttribute('aria-busy','false');big.style.transform='';bg.style.opacity='';num.style.opacity='';again.disabled=false;sr.textContent='Pagina geladen';onthoud();}
function speel(){again.disabled=true;root.classList.add('is-laden');site.setAttribute('aria-busy','true');bg.style.opacity='1';num.style.opacity='1';big.style.transform='translate(-50%,-50%)';
  if(rm){num.textContent='100';bar.style.width='100%';setTimeout(klaar,350);return;}
  var t0=performance.now(),D=1000;
  (function tel(now){var p=Math.min(1,(now-t0)/D),e=1-Math.pow(1-p,3),v=Math.round(e*100);num.textContent=('00'+v).slice(-3);bar.style.width=v+'%';
    if(p<1)requestAnimationFrame(tel);else verhuis();})(t0);}
function verhuis(){var R=root.getBoundingClientRect();logo.style.visibility='hidden';root.classList.remove('is-laden');var hr=logo.getBoundingClientRect();root.classList.add('is-laden');
  var br=big.getBoundingClientRect(),s=hr.width/br.width;
  var from='translate('+(br.left-R.left)+'px,'+(br.top-R.top)+'px) scale(1)',to='translate('+(hr.left-R.left)+'px,'+(hr.top-R.top)+'px) scale('+s+')';
  big.style.left='0';big.style.top='0';
  var a=big.animate([{transform:from},{transform:to}],{duration:650,easing:'cubic-bezier(.7,0,.2,1)',fill:'forwards'});
  bg.animate([{opacity:1},{opacity:0}],{duration:450,delay:200,easing:'ease-out',fill:'forwards'});num.animate([{opacity:1},{opacity:0}],{duration:200,fill:'forwards'});
  a.onfinish=function(){logo.style.visibility='';big.style.left='';big.style.top='';a.cancel();bg.getAnimations().forEach(function(x){x.cancel();});num.getAnimations().forEach(function(x){x.cancel();});klaar();};}
again.addEventListener('click',speel);
if(gezien()){klaar();}else{speel();}
}
init(document.querySelector('.jouw-container'));