Types
| Type | When |
|---|---|
| Determinate bar | Known progress (file upload, multi-step form) |
| Indeterminate bar | Unknown duration but brief |
| Circular/ring | Space-constrained, or for completion percentage |
| Step indicator | Multi-step processes with discrete steps |
| Skeleton | Content loading placeholder |
Design Rules
- Show percentage for determinate progress
- Estimated time remaining for long operations
- Use animation direction to indicate activity
- Color: brand color for normal, green for complete
- Don't show progress for operations under 1 second
- For >10 seconds: show what's happening ("Uploading file 3 of 7")
Step Indicators
- Completed steps: filled circle + checkmark
- Current step: filled circle + number
- Future steps: outlined circle + number
- Connected by a line (filled to current point)