Progress Indicators¶
Progress indicators show the current state of multi-step processes, perfect for visualizing workflows, installation steps, or test execution stages.
Active Progress¶
Shows a process that is currently in progress:
Completed Progress¶
Shows a fully completed process:
Progress States¶
Available Classes¶
| Class | Description | State |
|---|---|---|
progress-step |
Default/pending state | Pending |
progress-step completed |
Completed step | Completed |
progress-step active |
Currently active step | Active |
Examples with Different Step Counts¶
3-Step Process¶
6-Step Process¶
8-Step Process (Long)¶
Use Cases¶
Progress indicators are ideal for:
- Installation Wizards: Show which step of the installation process is active
- Test Execution: Display which test module is currently running
- Form Wizards: Guide users through multi-step forms
Best Practices¶
- Clear States: Always have one active step (unless completed or not started)
- Responsive: The indicators scale appropriately on mobile devices
- Context: Pair with descriptive text to explain what each step represents