Skeletons in de vorm van de inhoud New
Loading states that follow the real layout: an invoice table, a news feed and product cards. Skeleton and content share one grid cell, so nothing shifts when content fades in. aria-busy plus a live message inform screen readers; reduced motion stops the shimmer.
| Factuur | Klant | Bedrag | Status |
|---|---|---|---|
| 2026-0412 | Bakkerij Verhoef | € 1.240,00 | Betaald |
| 2026-0413 | Kapsalon Mira | € 385,50 | Open |
| 2026-0414 | De Vries Installatie | € 2.918,75 | Te laat |
| 2026-0415 | Tuin & Zo | € 96,80 | Betaald |
KM
Kapsalon MiraVandaag · 10:12
Vanaf maandag 13 oktober zijn we ook op dinsdagavond open tot 21:00. Boek online of bel 030 123 4567.
Wollen plaid€ 69,95
Keramiek mok€ 18,50
Linnen theedoek€ 12,95
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.
<!-- Skeletons in de vorm van de inhoud · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="sks">
<div class="sks__top"><div class="sks__tabs" role="tablist" aria-label="Soort inhoud"><button type="button" role="tab" class="sks__tab" aria-selected="true">Tabel</button><button type="button" role="tab" class="sks__tab" aria-selected="false" tabindex="-1">Feed</button><button type="button" role="tab" class="sks__tab" aria-selected="false" tabindex="-1">Producten</button></div><button type="button" class="sks__reload"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M16 10a6 6 0 1 1-1.8-4.3M16 3.5v3.2h-3.2"/></svg>Opnieuw laden</button></div>
<div class="sks__panel" role="tabpanel" tabindex="0" aria-busy="true"><div class="sks__stack">
<div class="sks__skel" aria-hidden="true"><div class="sks__trow sks__trow--h"><i style="width:22%"></i><i style="width:34%"></i><i style="width:18%"></i><i style="width:14%"></i></div><div class="sks__trow"><i style="width:20%"></i><i style="width:38%"></i><i style="width:16%"></i><i class="sks__pill"></i></div><div class="sks__trow"><i style="width:20%"></i><i style="width:30%"></i><i style="width:16%"></i><i class="sks__pill"></i></div><div class="sks__trow"><i style="width:20%"></i><i style="width:34%"></i><i style="width:16%"></i><i class="sks__pill"></i></div><div class="sks__trow"><i style="width:20%"></i><i style="width:26%"></i><i style="width:16%"></i><i class="sks__pill"></i></div></div>
<div class="sks__real"><table class="sks__table"><thead><tr><th>Factuur</th><th>Klant</th><th class="sks__num">Bedrag</th><th>Status</th></tr></thead><tbody><tr><td>2026-0412</td><td>Bakkerij Verhoef</td><td class="sks__num">€ 1.240,00</td><td><span class="sks__st sks__st--ok">Betaald</span></td></tr><tr><td>2026-0413</td><td>Kapsalon Mira</td><td class="sks__num">€ 385,50</td><td><span class="sks__st">Open</span></td></tr><tr><td>2026-0414</td><td>De Vries Installatie</td><td class="sks__num">€ 2.918,75</td><td><span class="sks__st sks__st--late">Te laat</span></td></tr><tr><td>2026-0415</td><td>Tuin & Zo</td><td class="sks__num">€ 96,80</td><td><span class="sks__st sks__st--ok">Betaald</span></td></tr></tbody></table></div>
</div></div>
<div class="sks__panel" role="tabpanel" tabindex="0" hidden><div class="sks__stack">
<div class="sks__skel" aria-hidden="true"><div class="sks__post"><i class="sks__av"></i><div class="sks__pl"><i style="width:40%"></i><i style="width:22%;height:7px"></i></div></div><i class="sks__line" style="width:92%"></i><i class="sks__line" style="width:70%"></i><div class="sks__tiles"><i></i><i></i><i></i></div></div>
<div class="sks__real"><div class="sks__post"><span class="sks__av sks__av--real">KM</span><div class="sks__pl"><b>Kapsalon Mira</b><span>Vandaag · 10:12</span></div></div><p class="sks__txt">Vanaf maandag 13 oktober zijn we ook op dinsdagavond open tot 21:00. Boek online of bel 030 123 4567.</p><div class="sks__tiles sks__tiles--real"><span style="background:#d9c7b4"></span><span style="background:#8f6f57"></span><span style="background:#3b3330"></span></div></div>
</div></div>
<div class="sks__panel" role="tabpanel" tabindex="0" hidden><div class="sks__stack">
<div class="sks__skel sks__cards" aria-hidden="true"><div class="sks__card"><i class="sks__img"></i><i style="width:80%"></i><i style="width:40%"></i></div><div class="sks__card"><i class="sks__img"></i><i style="width:70%"></i><i style="width:45%"></i></div><div class="sks__card"><i class="sks__img"></i><i style="width:76%"></i><i style="width:38%"></i></div></div>
<div class="sks__real sks__cards"><div class="sks__card"><span class="sks__img" style="background:#c9b8a3"></span><b>Wollen plaid</b><span>€ 69,95</span></div><div class="sks__card"><span class="sks__img" style="background:#7d8a76"></span><b>Keramiek mok</b><span>€ 18,50</span></div><div class="sks__card"><span class="sks__img" style="background:#e3d9cc"></span><b>Linnen theedoek</b><span>€ 12,95</span></div></div>
</div></div>
<span class="sks__sr" aria-live="polite"></span>
</div>
</div>/* Skeletons in de vorm van de inhoud · NedDev · eigen werk. */
.sks{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;box-sizing:border-box;text-align:left}
.sks *,.sks *::before,.sks *::after{box-sizing:border-box}
.sks__top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px 0;border-bottom:1px solid #e6e3df}
.sks__tabs{display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.sks__tab{font:500 12px/1 'Switzer',system-ui,sans-serif;color:#5c5a57;background:none;border:0;border-bottom:2px solid transparent;padding:8px 8px 9px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
.sks__tab:hover{color:#0a0a0a}
.sks__tab[aria-selected="true"]{color:#0a0a0a;font-weight:600;border-bottom-color:#F5480F}
.sks__tab:focus-visible{outline:2px solid #F5480F;outline-offset:-2px;border-radius:3px}
.sks__reload{flex:none;display:inline-flex;align-items:center;gap:5px;font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;color:#0a0a0a;background:#fff;border:1px solid #cfccc7;border-radius:999px;padding:5px 9px;margin-bottom:5px;cursor:pointer;transition:border-color .15s}
.sks__reload svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.sks__reload:hover{border-color:#0a0a0a}
.sks__reload:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.sks__reload:disabled{color:#8a8781;cursor:progress}
.sks__panel{flex:1;min-height:0;overflow:auto;padding:10px 12px}
.sks__panel[hidden]{display:none}
.sks__panel:focus-visible{outline:2px solid #F5480F;outline-offset:-3px}
.sks__stack{display:grid}
.sks__skel,.sks__real{grid-area:1/1;transition:opacity .35s ease}
.sks__skel{opacity:0;pointer-events:none}
.sks__real{opacity:1}
.sks__panel.is-loading .sks__skel{opacity:1}
.sks__panel.is-loading .sks__real{opacity:0;visibility:hidden;transition:none}
.sks__skel i{display:block;height:9px;border-radius:3px;background:#ebe8e4;background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%);background-size:200% 100%;background-repeat:no-repeat;animation:sks-shine 1.3s ease-in-out infinite}
.sks__trow{display:flex;gap:4%;align-items:center;padding:10px 0;border-bottom:1px solid #f1eeea}
.sks__trow--h i{height:7px;background-color:#e0ddd8}
.sks__skel i.sks__pill{width:12%;height:16px;border-radius:999px}
.sks__table{width:100%;border-collapse:collapse;font-size:12.5px}
.sks__table th{text-align:left;font:500 10px/1.2 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:#5c5a57;padding:4px 6px 6px 0;border-bottom:1px solid #e6e3df}
.sks__table td{padding:6px 6px 6px 0;border-bottom:1px solid #f1eeea;white-space:nowrap}
.sks__table td:first-child{font:500 11px 'JetBrains Mono',ui-monospace,monospace;color:#3d3b38}
.sks__num{text-align:right;font-variant-numeric:tabular-nums}
.sks__table th.sks__num{text-align:right}
.sks__st{display:inline-block;font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;background:#f4f3f1;color:#3d3b38}
.sks__st--ok{background:#e3f1e8;color:#1d6b3f}
.sks__st--late{background:#fbe7e4;color:#B42318}
.sks__post{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.sks__skel i.sks__av,.sks__av{flex:none;width:34px;height:34px;border-radius:50%}
.sks__av--real{display:grid;place-items:center;background:#0a0a0a;color:#fff;font-size:12px;font-weight:600}
.sks__pl{flex:1;display:flex;flex-direction:column;gap:6px}
.sks__pl b{font-size:13px;font-weight:600}
.sks__pl span{font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;color:#5c5a57;margin-top:-3px}
.sks__skel i.sks__line{margin-bottom:7px}
.sks__txt{margin:0 0 8px;font-size:12.5px;line-height:1.45}
.sks__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4px}
.sks__skel .sks__tiles i,.sks__tiles span{height:52px;border-radius:4px}
.sks__tiles--real span{display:block}
.sks__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sks__card{display:flex;flex-direction:column;gap:6px;min-width:0}
.sks__skel i.sks__img,.sks__img{display:block;aspect-ratio:4/5;height:auto;max-height:110px;width:100%;border-radius:4px}
.sks__card b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sks__card span:last-child{font-size:12px;color:#3d3b38;font-variant-numeric:tabular-nums;margin-top:-4px}
.sks__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes sks-shine{from{background-position:150% 0}to{background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){.sks__skel i{animation:none}.sks__skel,.sks__real{transition:none}}// Skeletons in de vorm van de inhoud · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.sks');if(!w)return;
var tabs=[].slice.call(w.querySelectorAll('.sks__tab')),panels=[].slice.call(w.querySelectorAll('.sks__panel')),sr=w.querySelector('.sks__sr'),rel=w.querySelector('.sks__reload'),uid='sks'+Math.random().toString(36).slice(2,8);
var names=['Tabel','Feed','Producten'],loaded=[false,false,false],cur=0,timers=[];
tabs.forEach(function(t,i){t.id=uid+'t'+i;panels[i].id=uid+'p'+i;t.setAttribute('aria-controls',panels[i].id);panels[i].setAttribute('aria-labelledby',t.id);});
function load(i){var p=panels[i];clearTimeout(timers[i]);p.classList.add('is-loading');p.setAttribute('aria-busy','true');if(i===cur)rel.disabled=true;
timers[i]=setTimeout(function(){p.classList.remove('is-loading');p.setAttribute('aria-busy','false');loaded[i]=true;if(i===cur){rel.disabled=false;sr.textContent=names[i]+' geladen';}},1300+i*150);}
function sel(i,focus){cur=i;tabs.forEach(function(t,j){var on=i===j;t.setAttribute('aria-selected',on?'true':'false');t.tabIndex=on?0:-1;panels[j].hidden=!on;});if(focus)tabs[i].focus();if(!loaded[i])load(i);else rel.disabled=false;}
tabs.forEach(function(t,i){t.addEventListener('click',function(){sel(i);});t.addEventListener('keydown',function(e){var n=null;if(e.key==='ArrowRight')n=(i+1)%tabs.length;else if(e.key==='ArrowLeft')n=(i-1+tabs.length)%tabs.length;else if(e.key==='Home')n=0;else if(e.key==='End')n=tabs.length-1;if(n!==null){e.preventDefault();sel(n,true);}});});
rel.addEventListener('click',function(){sr.textContent=names[cur]+' wordt geladen';load(cur);});
panels.forEach(function(p,i){if(i)p.classList.add('is-loading');});
load(0);
}
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 →