Design System
Playground Zur Vorlage

Komponenten · RückmeldungLade-Zustand

Komponente · 6 Varianten

Lade-Zustand

components/LadeZustand.astro

Skeleton-Sätze für Karte, Karten-Raster, Liste, Text, Tabelle, ganze Seite. Fond in Fond, animate-pulse, aria-busy.

Notizen

  • Bestand: Fortschritt (Element) hat Skeleton-Text und -Karte; hier die Kompositionen.
  • reduced-motion stoppt das Pulsieren global.

Props

Name Typ Default Notiz
variant "karte" | "karten" | "liste" | "text" | "tabelle" | "seite" "karte" 01–06.
surface "nacht" | "paper" "nacht" Pflicht-Paar.
<LadeZustand variant="karte" surface="nacht" />

01 · Karte

Icon, Titel, zwei Zeilen

Fortschritt skeleton-karte. max-w-xs.

Nacht

Paper

02 · Karten

Drei nebeneinander

Feature-Grid. —

Nacht

Paper

03 · Liste

Avatar, Zeile, Zahl

Blog-Card liste. Haarlinien.

Nacht

Paper

04 · Text

H2 und drei Zeilen

Prose. —

Nacht

Paper

05 · Tabelle

Vier Spalten, vier Zeilen

Tabelle. —

Nacht

Paper

06 · Seite

Titel, Band, drei Karten

Startseite. gap-12.

Nacht

Paper