Progress Component
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Basic
A simple progress bar.
Progress Values
Progress bars at different completion levels.
0%
Not started
25%
Getting started
50%
Halfway there
75%
Almost done
100%
Complete
Interactive
Control the progress value dynamically.
60%
Usage Examples
Common use cases for progress indicators.
File Upload
document.pdf
2.4 MB / 4.0 MB
Profile Completion
Complete your profile
3 of 5 steps
Loading Content
Loading...
Accessibility
The Progress component uses ARIA attributes including role="progressbar",
aria-valuemin,
aria-valuemax, and
aria-valuenow for screen reader support.