Components
Progress Bar
Horizontal neon progress bar with solid, segmented, striped, and pulse variants. Supports size presets, glow, percentage label, and smooth fill transition.
npx neonblade add progress-barSOLID
0%
0%
0%
SEGMENTED
0%
0%
STRIPED + PULSE
10%
20%
SIZES
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | Current fill value (0 to max). |
max | number | 100 | Maximum value. |
color | "cyan" | "pink" | "green" | string | "cyan" | Neon accent color. |
variant | "solid" | "segmented" | "striped" | "pulse" | "solid" | Visual style of the filled bar. For an indeterminate arrow loader, use the ArrowLoader component. |
size | "xs" | "sm" | "md" | "lg" | "md" | Bar height preset. |
showLabel | boolean | false | Show a percentage label above the bar. |
label | string | - | Custom label text (overrides the auto %). |
glow | boolean | true | Neon glow on the filled bar. |
className | string | - | Additional className on the wrapper. |