Progress
A progress bar with 4 visual styles, 3 sizes, and optional percentage label.
Import
import { Progress } from "@igorao79/uivix";Playground
65%
65%
All Variants
default
65%
gradient
65%
striped
65%
glow
65%
Usage
<Progress value={65} variant="gradient" showValue />
<Progress value={40} variant="striped" size="lg" />
<Progress value={80} variant="glow" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Progress value from 0 to 100 |
| variant | "default" | "gradient" | "striped" | "glow" | "default" | Visual style of the progress bar |
| size | "sm" | "md" | "lg" | "md" | Height of the progress bar |
| showValue | boolean | false | Show percentage label |
| color | string | "#8b5cf6" | Custom bar color (not used with gradient variant) |
| className | string | - | Additional CSS classes |