Progress
Feedback
Loading
Visual progress indicators for loading states and operations.
Preview
Interactive progress bar
Progress0%
Variants
Semantic color variants
Default45%
Success100%
Warning75%
Error25%
Progress Values
Various progress states
Starting0%
Quarter25%
Half50%
Three Quarters75%
Complete100%
Upload Example
Common use case for file uploads
project-files.zip
2.4 MB
Segmented Style
Segmented progress bar for usage and capacity visualization
Storage Usage72%
Segmented Sizes
Available size variants for segmented style
sm65%
md65%
lg65%
xl65%
Segmented Colors
Color variants for segmented style
indigo70%
teal70%
emerald70%
amber70%
rose70%
violet70%
Segmented with Labels
Built-in label positioning
Label Right
45%
Label Top
45%
Label Bottom
45%
Segmented Gradient
Segments with opacity gradient effect
indigo gradient80%
teal gradient80%
violet gradient80%
Custom Threshold Colors
Dynamic colors based on value thresholds
Status Colors85%
Usage Warning92%
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Progress value (0-max) |
max | number | 100 | Maximum value |
variant | 'default' | 'success' | 'warning' | 'error' | 'default' | Color variant (continuous style) |
progressStyle | 'continuous' | 'segmented' | 'continuous' | Visual style |
segments | number | 20 | Number of segments (segmented style) |
color | 'indigo' | 'teal' | 'emerald' | 'amber' | 'rose' | 'violet' | 'slate' | 'indigo' | Color (segmented style) |
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size (segmented style) |
showLabel | boolean | false | Show percentage label (segmented style) |
labelPosition | 'top' | 'bottom' | 'right' | 'right' | Label position (segmented style) |
animate | boolean | false | Enable fill animation (segmented style) |
gradient | boolean | false | Enable gradient opacity effect (segmented style) |
getSegmentColor | (index, filled, total) => string | undefined | — | Custom segment color function |
className | string | — | Additional CSS classes |
Usage
Import and implementation examples
import { Progress } from '@/components/ui/progress'
// Basic continuous progress
<Progress value={66} />
// With label
<div>
<div className="flex justify-between text-sm mb-2">
<span>Progress</span>
<span>66%</span>
</div>
<Progress value={66} />
</div>
// Color variants (continuous style)
<Progress value={45} variant="default" />
<Progress value={100} variant="success" />
<Progress value={75} variant="warning" />
<Progress value={25} variant="error" />
// Segmented style
<Progress progressStyle="segmented" value={65} />
// Segmented with options
<Progress
progressStyle="segmented"
value={70}
color="teal"
size="lg"
segments={30}
/>
// Segmented with label
<Progress progressStyle="segmented" value={65} showLabel />
// Segmented with animation
<Progress progressStyle="segmented" value={progress} animate />
// Segmented with gradient
<Progress progressStyle="segmented" value={80} gradient />
// Custom threshold colors
<Progress
progressStyle="segmented"
value={85}
segments={20}
getSegmentColor={(index, filled, total) => {
if (index >= filled) return undefined
const position = index / total
if (position < 0.5) return '#10b981'
if (position < 0.75) return '#f59e0b'
return '#f43f5e'
}}
/>Features
Built-in functionality
- 2 visual styles: Continuous (default) and segmented
- 4 continuous variants: Default, success, warning, error
- 7 segmented colors: Indigo, teal, emerald, amber, rose, violet, slate
- 4 segmented sizes: sm, md, lg, xl
- Smooth animation: 300ms transition on value change
- Staggered animation: Segmented style supports animated fill
- Gradient effect: Progressive opacity for visual depth
- Custom colors: Per-segment color via callback function
- Label support: Built-in percentage label with positioning
- Accessible: ARIA progressbar role with values
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
role="progressbar" on elementaria-valuenow shows current valuearia-valuemin="0" and aria-valuemax="100"Keyboard Navigation
| Key | Action |
|---|---|
| N/A | Progress is not interactive |
Notes
- Screen readers announce progress value
- Label should be provided separately
- Consider announcing completion state