Loading...
Loading...
The Progress component displays the completion status of a task or process. Perfect for uploads, downloads, form completion, and loading states.
import { ProgressRoot, ProgressTrack, ProgressRange } from '@/components/ui/progress';
// Basic progress
<ProgressRoot value={60}>
<ProgressTrack>
<ProgressRange />
</ProgressTrack>
</ProgressRoot>
// With value display
<ProgressRoot value={progress}>
<ProgressTrack>
<ProgressRange />
</ProgressTrack>
</ProgressRoot>
<ProgressValueText />
// Animated with stripes
<ProgressRoot value={progress} animated striped>
<ProgressTrack>
<ProgressRange />
</ProgressTrack>
</ProgressRoot>
// Indeterminate
<ProgressRoot value={null}>
<ProgressTrack>
<ProgressRange />
</ProgressTrack>
</ProgressRoot>
// Different sizes
<ProgressRoot value={60} size="sm"> {/* xs, sm, md, lg, xl */}
<ProgressTrack>
<ProgressRange />
</ProgressTrack>
</ProgressRoot>