Ein Skeleton Screen ist eine Bauform des Loading State, die den erwarteten Inhalt als graue Platzhalterflächen in seiner späteren Anordnung andeutet. Statt eines Ladekreises in der Bildmitte stehen dort Balken für Überschriften, Kästen für Bilder und Zeilen für Text, jeweils an der Stelle und in der Größe des echten Inhalts. Ein eigener Zustand ist er damit nicht: Welcher Zustand vorliegt, entscheidet der Loading State, und der Skeleton Screen bestimmt nur, wie dieser aussieht.
- Skeleton Screen
Bauform des Loading State, die den erwarteten Inhalt als graue Platzhalterflächen in seiner späteren Anordnung andeutet.
Beispiel: „Die Artikelübersicht zeigt beim Nachladen einen Skeleton Screen mit sechs Kacheln.“Auch: Skeleton Loader oder Content Placeholder. Eine gängige deutsche Bezeichnung hat sich nicht durchgesetzt.
Abgrenzung zum Empty State: Der Skeleton Screen steht für Inhalt, der unterwegs ist, der Empty State für Inhalt, den es nicht gibt. Wer beide gleich gestaltet, verwirrt genau an der Stelle, an der Klarheit gebraucht wird.
Warum Platzhalterflächen ruhiger wirken als ein Ladekreis
Ein Ladekreis lenkt den Blick auf das Warten. Er sitzt meist in der Mitte und sagt bis zum Ende nichts über das, was kommt. Ein Skeleton Screen dreht das um: Die Augen erfassen schon Anordnung und Umfang, während die Daten noch laufen.
Der zweite Gewinn ist die Stabilität. Weil die Platzhalter dieselben Maße haben wie der spätere Inhalt, verschiebt sich beim Erscheinen nichts.
Wie ein Skeleton Screen gebaut wird
Technisch sind es leere Elemente mit Hintergrundfarbe, festen Maßen und abgerundeten Ecken. Ein Lichtschein, der von links nach rechts darüberläuft, zeigt, dass gearbeitet wird. Diese Bewegung bleibt langsam und flach, sonst wird aus dem ruhigen Platzhalter ein flackernder Bereich.
.skeleton {
height: 1rem;
border-radius: 4px;
background: linear-gradient(90deg, #eee 25%, #f6f6f6 37%, #eee 63%);
background-size: 400% 100%;
animation: skeleton-shine 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.skeleton { animation: none; }
}Für Screenreader zählt die Fläche nicht als Inhalt. Der ladende Bereich wird über aria-busy="true" als beschäftigt gekennzeichnet und die Platzhalter selbst aus der Ausgabe genommen, damit niemand eine Liste aus leeren Zeilen vorgelesen bekommt.
Wann er die falsche Wahl ist
Bei sehr kurzen Wartezeiten schadet er. Ist der Inhalt nach 200 Millisekunden da, blitzt der Skeleton Screen einmal auf und wirkt wie ein Fehler. Üblich ist deshalb eine kleine Verzögerung, bevor er erscheint.
Ungeeignet ist er außerdem, wenn die Struktur des Ergebnisses unbekannt ist. Eine Suche, die eine Zeile oder vierzig liefern kann, lässt sich nicht andeuten: Ein Platzhalter für sechs Treffer führt in die Irre, wenn am Ende einer kommt. Auch für Vorgänge nach einem Klick passt er nicht: Wer speichert, will die Rückmeldung am Button sehen.