Progress
FeedbackHorizontal progress bar with determinate and indeterminate modes.
Shows task completion from 0–100. Pass value={null} for an indeterminate sliding animation. segmented overlays dividers to show N equal segments.
Usage
import { Progress } from "nosible-ux"
export default function Example() {
return <Progress value={72} label="Signal scan" />
}Examples
Tones
Indexed80%
Complete100%
Partial55%
Failed20%
Indeterminate and segmented
Scanning...
Step 3 of 560%
Accessibility
role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax, and aria-label. Indeterminate removes value attributes. Respects prefers-reduced-motion.
Props
| Name | Type | Default | Description |
|---|---|---|---|
asChild | boolean | undefined | — | |
getValueLabel | ((value: number, max: number) => string) | undefined | — | |
label | string | undefined | — | Label rendered above the track. When provided, also shows percentage on the right. |
max | number | undefined | — | |
segmented | number | undefined | — | Overlay N-1 dividers to create N equal segments. |
size | "xs" | "sm" | "md" | "lg" | null | undefined | — | |
tone | "default" | "critical" | "success" | "warning" | undefined | "default" | Colour tone applied to the indicator fill. |
value | number | null | undefined | undefined | 0–100 for determinate; omit or pass null for indeterminate. |