Progress
View on StorybookStorybookDisplays an indicator showing the completion progress of a task. Perfect for uploads, downloads, and loading states.
Preview
Installation
Usage
Examples
Basic
tsx
With Label
Progress60%
tsx
With Shimmer Effect
The progress bar includes an animated shimmer effect that continuously slides across, giving a "live" feel.
Different Sizes
Extra Small (h-1)
Small (h-2, default)
Medium (h-3)
Large (h-4)
tsx
Different Colors
Blue
Green
Red
tsx
Upload Progress
Uploading...0%
Props
| Name | Type | Default | Description |
|---|---|---|---|
value | number | 0 | The progress value (0-100) |
max | number | 100 | The maximum progress value |
Accessibility
ARIA Roles
Uses role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax.
Screen Readers
Progress value is automatically announced to screen reader users.
Labels
Use aria-label or aria-labelledby to describe what the progress represents.
Use Cases
File upload progress indicators
Step completion tracking
Loading bars for long operations
Profile completion indicators
Best Practices
Do
- ✓ Show percentage or step count alongside the bar
- ✓ Use indeterminate state when duration is unknown
- ✓ Animate progress smoothly for better UX
Don't
- ✗ Don't use for short operations — use Spinner instead
- ✗ Don't fake progress percentages
- ✗ Don't use without accessible label (aria-label)