Skeleton-Loading-Generator (CSS)

Skeleton-Loading-Generator (CSS): wofür es gut ist

Der Skeleton Screen ist das graue Gerüst, das anstelle des Inhalts erscheint, während er lädt, wie bei Facebook und YouTube. Er zeigt die Form dessen, was kommt, lässt das Warten kürzer wirken und verhindert, dass die Seite springt, wenn der Inhalt erscheint.

Wähle das Modell (Karte mit Bild, Liste mit Avatar, Profil oder Absatz), wie oft wiederholt wird, die Farben und die Ecken. Der animierte Glanz bewegt nur den Hintergrund und wird für alle abgeschaltet, die weniger Bewegung wünschen, und der Block nutzt aria-busy mit einem Ladetext für Screenreader.

So geht’s

1. Wähle das Modell und wie oft wiederholt wird.
2. Passe Farben, Ecken und Glanz an.
3. Kopiere den Code und ersetze ihn durch den Inhalt, wenn er kommt.

Wann nutzen

• Produktliste, die per API geladen wird.
• Feed oder Kommentarliste.
• Dashboards und Websysteme.

Häufige Fragen

Warum Skeleton und kein Lade-Icon?

Das Gerüst zeigt die Form dessen, was erscheinen wird, sodass die Seite nicht springt, wenn der Inhalt kommt, und das Warten kürzer wirkt. Es funktioniert besser für Karten, Listen und Profile; bei schnellen Aktionen, wie dem Absenden eines Formulars, genügt eine Anzeige im Button selbst.

Wie ist es für Nutzende von Screenreadern?

Der Block bekommt aria-busy=true und einen versteckten Text „Lädt“; die Rechtecke sind dekorativ (aria-hidden). Wenn der Inhalt kommt, ersetze das Gerüst durch den Inhalt und entferne aria-busy.

Belastet der animierte Glanz?

Nein: Die Animation bewegt nur den Hintergrund jedes Rechtecks. Für alle, die das System auf reduzierte Bewegung eingestellt haben, wird der Glanz abgeschaltet, und es bleibt nur die Farbe.

Ist das wirklich kostenlos?

Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.

Ähnliche Tools