Progress Bar
Horizontal bar showing completion percentage. Two sizes, three label positions, and an animated live demo.
import
{ ProgressBar } from "@pepulux/ui"Label positions — none / right / bottom
Choose where the percentage label appears.
label=none (default)
label=right
label=bottom
90%
Sizes — sm / md
sm = 4px track, md = 8px track.
size=sm (4px)
size=md (8px)
Multiple bars — storage breakdown
Stack multiple bars with different values to show usage per category.
Storage
Bandwidth
API calls
Animated — live upload progress
Pair with state updates to show real-time upload or processing progress.
Uploading file…0%
Boundary values — 0% and 100%
Label: Top floating / Bottom floating
Figma Label — the percentage sits in a chip that follows the progress.
40%
70%
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | number | — | Current progress value (0 – max) |
| max | number | 100 | Maximum value. Value is clamped to [0, max]. |
| label | "none" | "right" | "bottom" | "top-floating" | "bottom-floating" | "none" | Figma Label — False | Right | Bottom | Top floating | Bottom floating |
| size | "sm" | "md" | "md" | Track height — sm 4px / md 8px |
| aria-label | string | — | Accessible label for the progressbar role |
| className | string | — | Additional CSS classes on the wrapper |