Skeleton-Loader-Generator
Platzhalter beim Laden gestalten: Karte, Liste oder Text mit Shimmer- oder Puls-Animation – barrierearmes HTML und CSS.
Der Skeleton-Loader-Generator erzeugt graue Platzhalter, die beim Laden die spätere Form des Inhalts andeuten. Du wählst Karte, Liste oder Text, Farben, Radius, Zeilenzahl sowie Shimmer- oder Puls-Animation. Das HTML meldet Screenreadern „wird geladen“ und blendet die Platzhalter selbst aus; bei reduzierter Bewegung stoppt die Animation.
<div role="status" style="width: 100%; max-width: 22rem">
<span class="sr-only">Inhalt wird geladen …</span>
<div aria-hidden="true">
<span class="skeleton skeleton-image"></span>
<span class="skeleton skeleton-title"></span>
<span class="skeleton skeleton-text"></span>
<span class="skeleton skeleton-text"></span>
<span class="skeleton skeleton-text"></span>
</div>
</div>Skeleton Screens
Skeleton Screens zeigen beim Laden ein graues Abbild der Seite. Sie verkürzen die gefühlte Wartezeit und verhindern Layoutsprünge, weil der Platz für Bilder und Texte schon reserviert ist. Das verbessert auch den Core-Web-Vitals-Wert Cumulative Layout Shift.
- Skeleton in der Größe des späteren Inhalts anzeigen.
- Daten laden.
- Skeleton durch den echten Inhalt ersetzen.
Für kurze, unbestimmte Wartezeiten nimm einen Spinner aus dem CSS-Loader-Generator.
Häufige Fragen
Wann ist ein Skeleton besser als ein Spinner?
Wenn die Struktur des Inhalts vorher bekannt ist, etwa bei Karten, Listen oder Profilen. Ein Skeleton wirkt schneller, weil der Aufbau schon sichtbar ist, und die Seite springt nicht, wenn die Daten kommen. Für unbestimmte Wartezeiten passt ein Spinner aus dem CSS-Loader-Generator.
Wie mache ich den Skeleton barrierefrei?
Die grauen Flächen sind mit aria-hidden="true" versteckt. Der umschließende Container hat role="status" und einen unsichtbaren Text „Inhalt wird geladen“, den Screenreader einmal ansagen.
Wie funktioniert der Shimmer-Effekt?
Ein Verlauf aus Grund-, Glanz- und Grundfarbe ist doppelt so breit wie das Element (background-size: 200%). Eine Animation verschiebt background-position und lässt den hellen Streifen darüberlaufen.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.