Element · 6 Varianten
Fortschritt
elements/Fortschritt.astro
Balken als Haarlinie in Oliv, unbestimmt wandert, Spinner aus dem Button, Skeleton als Fond. Alles reagiert auf reduced-motion.
Notizen
- Bestand: nw-btn-spin im Button, Haarlinien-Progress in Feature-Tabs (transform scaleX, oliv-300 / oliv-700).
- Balken bleibt 1px. Kein dicker Track, kein Radius.
- Skeleton nutzt animate-pulse, reduced-motion in global.css stoppt es.
Props
| Name | Typ | Default | Notiz |
|---|---|---|---|
| variant | "balken" | "balken-label" | "unbestimmt" | "spinner" | "skeleton-text" | "skeleton-karte" | "balken" | 01–06. |
| surface | "nacht" | "paper" | "nacht" | Pflicht-Paar. |
<Fortschritt variant="balken" surface="nacht" />01 · Balken
1px, 60 %
Feature-Tabs. scaleX, origin-left.
Nacht
Paper
02 · Mit Label
Tag 8 von 14
Prozess. Labels in Mono.
Nacht
Tag 8 von 14 57 %
Paper
Tag 8 von 14 57 %
03 · Unbestimmt
Drittel wandert
Anfrage. 1,2 s ease-out.
Nacht
Paper
04 · Spinner
16, currentColor
nw-btn-spin. Neben Wort.
Nacht
Lädt
Paper
Lädt
05 · Skeleton Text
Drei Zeilen
Anfrage. Breiten 3/4, 1, 2/3.
Nacht
Paper
06 · Skeleton Karte
Icon, Titel, Satz
Feature-Card. Fond in Fond.
Nacht
Paper