Progress
A progress indicator component with multiple variants, sizes, and animation support
Installation
Install the Progress component using the nocta-ui CLI:
npx nocta-ui add progressImport the component:
import { Progress } from '@/components/ui/progress';Examples
Default Progress
Basic progress65%
Variants
The Progress component supports four variants: default, success, warning, and destructive.
Default progress60%
Success progress75%
Warning progress45%
Error progress30%
Sizes
Three size options are available: sm, md, and lg. The default size is md.
Small
Medium
Large
Animated Progress
Progress automatically animates when the value changes.
Animated progress0%
Custom Maximum Value
Set a custom maximum value using the max prop.
Custom max value75%
Large max value50%
Without Label
Hide the label by omitting the showLabel prop.
Api Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current progress value |
max | number | 100 | Maximum progress value |
variant | 'default' | 'success' | 'warning' | 'destructive' | 'default' | Progress bar color variant |
size | 'sm' | 'md' | 'lg' | 'md' | Progress bar height |
showLabel | boolean | false | Show progress label and percentage |
indeterminate | boolean | false | Show indeterminate/loading state |
className | string | '' | Additional CSS classes |
aria-label | string | — | Accessible label for screen readers |
The Progress component also accepts all standard HTML div attributes.