Progress
A Progress component visually indicates the completion status of a task or process. It typically consists of a progress bar that fills up as the task progresses, providing users with a clear and immediate understanding of how much of the task is completed and how much remains. This component is commonly used in forms, uploads, downloads, and loading states to enhance user experience by managing expectations and keeping users informed.
# Demo
Basic Progress
Simple progress bars with different values and labels.
Progress with Labels
Getting Started: 25%
In Progress: 50%
Almost Done: 75%
Completed: 100%
Progress without Labels
Interactive Progress
50% Complete: 50%
File Operations Progress
Progress bars for download and upload operations.
Download Progress
Ready to Download: 0%
Click to start download
Upload Progress
Ready to Upload: 0%
Click to start upload
Animated Progress
Progress bars with smooth animations and transitions.
Smooth Animation
Processing... 0%: 0%
Click to start animation
System Status Progress
Progress bars showing system resource usage and status.
CPU Usage
45%: 45%
Normal
Memory
68%: 68%
Moderate
Disk Space
82%: 82%
Getting full
Battery
75%: 75%
Good
Network
92%: 92%
Excellent
Performance
68%: 68.33333333333333%
Overall system performance
Progress with Status
Progress bars with status indicators and contextual information.
Project Setup
CompleteSetup Complete: 100%
Development
In Progress65% Complete: 65%
Testing
PendingNot Started: 0%
Deployment
ScheduledAwaiting Development: 0%
Skills & Ratings Progress
Progress bars representing skills, ratings, and achievements.
Technical Skills
ReactExpert
TypeScriptAdvanced
Node.jsIntermediate
PythonBeginner
Achievement Progress
5-Star Reviews
47/50Customer Satisfaction
88%Project Completion
23/25Growth Target
72%Progress Best Practices
Guidelines for effective progress bar implementation.
✅ Do
- • Show progress for operations taking 2 seconds
- • Use descriptive labels for context
- • Provide percentage or time estimates
- • Use appropriate colors for different states
- • Make progress bars accessible
- • Show completion status clearly
- • Use smooth animations for better UX
❌ Don't
- • Use progress bars for instant operations
- • Make progress bars too small to see
- • Use misleading progress indicators
- • Forget to handle error states
- • Use progress bars without context
- • Make progress bars jump backwards
- • Ignore accessibility requirements
Progress Summary
Current status of all progress examples.
Basic Progress
50%
Interactive demo
Download
0%
Ready
Upload
0%
Ready
Animation
0%
Ready
# Usage
# Attributes
| Name | Type | Default | Details |
|---|---|---|---|
| value | number | Required | Current progress value. |
| className | string | ' ' | You can customise by passing tailwind classes. |
| label | string | Optional | Label for the progress bar. |
| showLabel | boolean | Optional | Whether to show the label. |
# Tags