Version: latest

Server-Komponente

Skeleton wird bevorzugt auf dem Server gerendert. Nutze den Standard-Import (z. B. @prokodo/ui/skeleton) — die Library erkennt die Umgebung automatisch.

Skeleton

Skeleton rendert Platzhalter-Elemente für Ladezustände, um Layout-Stabilität und wahrgenommene Performance zu verbessern.

Übersicht

import { Skeleton } from "@prokodo/ui/skeleton"

{
  /* Text placeholder */
}
;<Skeleton variant="text" lines={3} />

{
  /* Avatar circle */
}
;<Skeleton variant="circle" width={48} height={48} />

{
  /* Card rectangle */
}
;<Skeleton variant="rect" width="100%" height={200} />

Live PreviewOpen in Storybook ↗

Import

import { Skeleton } from "@prokodo/ui/skeleton"

CSS:

import "@prokodo/ui/skeleton.css"

Props

Prop	Typ	Standard	Pflicht	Beschreibung
`variant`	`"text" \| "circular" \| "rectangular"`	`"text"`	—	Form-Variante des Skeletons.
`animation`	`"pulse" \| "wave" \| "none"`	`"pulse"`	—	Animationsstil.
`width`	`number \| string`	—	—	Breite des Skeletons.
`height`	`number \| string`	—	—	Höhe des Skeletons.
`className`	`string`	—	—	CSS-Klasse am Root-Element.

Siehe src/components/skeleton/Skeleton.model.ts für den vollständigen SkeletonProps-Typ.

Design-Tokens

Passe via CSS Custom Properties auf :root oder einem übergeordneten Element an.

Token	Standard	Beschreibung
`--pk-skeleton-bg`	`rgba(0, 0, 0, 0.08)`	Skeleton-Hintergrund (hell)
`--pk-skeleton-bg-dark`	`rgba(30, 48, 79, 0.11)`	Skeleton-Hintergrund (dunkel)
`--pk-skeleton-shimmer-fg`	`var(--pk-palette-white)`	Shimmer-Highlight (hell)
`--pk-skeleton-shimmer-fg-dark`	`var(--pk-color-brand)`	Shimmer-Highlight (dunkel)
`--pk-skeleton-radius`	`4px`	Eckenradius

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
4.1.2	Name, Rolle, Wert (A)	✅ Erfüllt	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.
4.1.3	Statusmeldungen (AA)	✅ Erfüllt	Statusmeldungen (Laden, Erfolg, Fehler, Fortschritt) müssen assistiven Technologien ohne Fokusverschiebung mitgeteilt werden (aria-live oder role='status').

Testabdeckung: 3 jest-axe-Assertion(s) in 1 Testdatei(en) · 1 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 Skeleton in Storybook öffnen

Quellcode

src/components/skeleton/Skeleton.model.ts