Skeleton Generator
Bouw CSS skeleton-laadschermen met shimmer- en pulse-animaties. Kies een layout-preset en kopieer schone HTML + CSS.
① Kies een layout-preset ② Kies animatie en kleuren ③ Kopieer de CSS en HTML
#2A2A2A
#3A3A3A
/* CSS */
.sk-bone {
background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
background-size: 200% 100%; animation: sk-shimmer 1.5s infinite;
border-radius: 4px;
}
.sk-img { width: 100%; height: 180px; border-radius: 8px; margin-bottom: 16px; }
.sk-line { height: 14px; margin-bottom: 10px; }
.sk-content { padding: 4px 0; }
.sk-card { max-width: 320px; }
.sk-list { display: flex; flex-direction: column; gap: 16px; }
.sk-list-item { display: flex; align-items: center; gap: 12px; }
.sk-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.sk-lines { flex: 1; }
.sk-article { max-width: 560px; }
.sk-profile { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 240px; }
.sk-circle { width: 72px; height: 72px; border-radius: 50%; }
.sk-profile-info { width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: center; }
@keyframes sk-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes sk-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.8; }
}
/* HTML */
<div class="sk-card">
<div class="sk-img sk-bone"></div>
<div class="sk-content">
<div class="sk-line sk-bone" style="width:60%"></div>
<div class="sk-line sk-bone" style="width:90%"></div>
<div class="sk-line sk-bone" style="width:75%"></div>
</div>
</div>Wat zijn skeleton-laadschermen en waarom gebruiken?
Skeleton-schermen zijn UI-placeholders die de structuur van inhoud nabootsen tijdens het laden. Ze verbeteren de waargenomen prestaties aanzienlijk. De shimmer-animatie past een bewegend verloop toe via background-position. Pulse gebruikt een opacity-animatie voor een ademeffect. De sleuteltechniek is een .sk-bone-klasse gecombineerd met border-radius.
Veelgestelde vragen
Een skeleton-scherm is een UI-placeholder die de layout van echte inhoud nabootst voordat deze is geladen, met vereenvoudigde vormen in gedempte kleuren.
Het shimmer-effect past een lineair verloop toe en animeert background-position van -200% naar 200% horizontaal, wat de illusie van licht over het element creëert.
Shimmer is geavanceerder en communiceert actief laden. Pulse is eenvoudiger en werkt beter met complexe layouts of donkere thema's.
Kopieer de gegenereerde HTML-structuur en vervang elke .sk-bone div door je echte inhoudselementen.
De standaardaanpak is het voorwaardelijk renderen van het skeleton of de echte inhoud op basis van een laadstatus-variabele.
Ja. Pas sk-shimmer of sk-pulse selectief toe op specifieke bones voor visuele variatie.
Ja, ze zijn bijzonder effectief op mobiel waar de netwerklatentie hoger is.