Progress & loading
Single step for Progress steps.
Variants: 6
| Property | Type / options |
|---|---|
| Title | text |
| Supporting text | text |
| Show supporting | boolean (on) |
| Orientation | Horizontal · Vertical |
| Status | Complete · Current · Upcoming |
Progress steps
Section titled “Progress steps”Multi-step flow indicator.
Variants: 2
| Property | Type / options |
|---|---|
| Orientation | Horizontal · Vertical |
Progress bar
Section titled “Progress bar”Linear progress.
Variants: 3
| Property | Type / options |
|---|---|
| Label | None · Right · Bottom |
Do
- Show percent when known.
- Use Loading indicator when not.
- Label what is progressing.
Don’t
- Don’t use for steps.
- Don’t animate backwards.
- Don’t show several bars for one task.
Progress circle
Section titled “Progress circle”Circular progress.
Variants: 3
| Property | Type / options |
|---|---|
| Size | sm · md · lg |
Loading indicator
Section titled “Loading indicator”Spinner for page or section loading.
Variants: 2
| Property | Type / options |
|---|---|
| Show label | boolean (on) |
| Size | sm · md |
Skeleton
Section titled “Skeleton”Loading placeholders.
Variants: 3
| Property | Type / options |
|---|---|
| Type | Text · Avatar + text · Card |