Spinner
Feedback
Rein darstellend
Introduction
Die Spinner-Komponente ist ein animierter kreisförmiger Indikator, der aktive Wartezustände darstellt. Ideal für schnelle Übergänge, Formularübermittlungen und Lade-Overlays, anpassbar mit expliziten Skalierungsbereichen und barrierefreien Beschreibungen.
Usage
So positionierst und konfigurierst du Spinner:
1. Standard Inline-Lader
Ein Standard-Lader, ideal, um Systemfortschritt in Abschnitten, zentrierten Containern oder Sidebar-Panels anzuzeigen.
{
"type": "spinner",
"size": "md",
"label": "Loading..."
}
Loading...
2. Akzentuierter großer Lader
Mit großflächiger visueller Spur, üblich als Mittelpunkt bei vollständigen Seitenneuladungen oder anfänglichen Workspace-Synchronisierungen.
{
"type": "spinner",
"size": "lg",
"label": "Synchronizing data..."
}
Synchronizing data...
3. Winziger Sub-Indikator (Button/Kontext-Lader)
Ein kleiner Lader für dichte Dashboards oder kompakte Kontextkarten, um das erneute Laden einzelner Assets anzudeuten.
{
"type": "spinner",
"size": "sm",
"label": "Connecting..."
}
Connecting...
Props
| Eigenschaft | CMS-Feldtyp | Standard | Beschreibung / unterstützte Optionen |
|---|---|---|---|
Größenstufe (size) | select | "md" | Steuert Durchmesser und Linienstärke des Kreisladers. • Optionen: "xs", "sm", "md", "lg", "xl", "2xl". |
Barrierefreies Label (label) | string | - | Alternative Beschreibung für Screenreader. Dringend empfohlen für Konformität. |
Architecture Notes
- Barrierefrei ab Werk: Jeder Spinner kompiliert mit nativem
role="status"-Wrapper und nur für Screenreader sichtbaren Labels (class="sr-only"), sodass Fortschritt korrekt angesagt wird. - Reines SVG-Rendering: Spinner-Animationen nutzen leichte Vektorpfade (
<svg>), rotiert via CSS-Keyframes – ohne schwere Asset-Abhängigkeiten. - Optimale Layout-Größe: Größenstufen entsprechen exakt den Spacing-Tokens des Designsystems, garantieren Ausrichtung in Buttons, Alerts oder Karten.