Progress
Animated progress bar with 5 variants (default/success/warning/error/info) and 3 sizes.
Live Demo
Variants
Sizes
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current progress value (0–max). |
max | number | 100 | Maximum value. |
size | 'sm' | 'md' | 'lg' | 'md' | Height of the progress bar. |
variant | 'default' | 'success' | 'warning' | 'error' | 'info' | 'default' | Color variant. |
aria-label | string | 'Progress' | Accessible label. |
Usage
import { Progress } from '@ghiberti85/ui'
// Default
<Progress value={60} />
// Variants
<Progress value={80} variant="success" />
<Progress value={40} variant="warning" />
<Progress value={25} variant="error" />
<Progress value={70} variant="info" />
// Sizes
<Progress value={60} size="sm" />
<Progress value={60} size="md" />
<Progress value={60} size="lg" />