Basic
A static progress bar at 45%.
Multiple Stages
Show different completion levels with labels.
Upload: 25%
Processing: 60%
Complete: 100%
Animated
Drive the value with state to create a live progress indicator.
Uploading... 0%
Edge Cases
Empty (0%) and full (100%) states.
Empty
Full
Props
| Prop | Type | Description |
|---|---|---|
| value | number | Current progress value (0-100). |
| max | number | Maximum value. Defaults to 100. |
| className | string | Additional classes on the root track element. |
Usage
{/* Static */}
<Progress value={45} />
{/* With label */}
<div>
<p className="text-sm mb-1">Uploading... 60%</p>
<Progress value={60} />
</div>
{/* Animated with state */}
const [value, setValue] = useState(0);
useEffect(() => {
const id = setInterval(() =>
setValue(prev => prev >= 100 ? 0 : prev + 2), 100);
return () => clearInterval(id);
}, []);
<Progress value={value} />