Progress
Displays 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.
RTL Considerations
The Progress component is fully RTL-compatible using logical properties.
LTR (English)
Loading75%
RTL (العربية)
Loading75%