A determinate or indeterminate bar with an optional caption and percentage readout, clamping any value into 0…max.
DeterminateWith valueIndeterminateClamped
<Progress value={62} label="Import progress" showValue />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Progress } from '@chanrg/4ui';<Progress value={62} label="Import progress" showValue />Indeterminate
Omit value (or pass null) while the total is unknown; the bar slides and drops aria-valuenow.
<Progress value={null} label="Syncing projects" />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | null | Omit or pass null for an indeterminate bar. Values outside 0…max are clamped. |
max | number | 100 | Upper bound; a non-positive max falls back to 100. |
label | string | 'Progress' | Names the bar and, when rendered, captions it. |
showValue | boolean | false | Adds the rounded percentage beside the caption — “—” while indeterminate. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
--4ui-track | Unfilled track behind the bar. |
--4ui-accent | Filled portion of the bar. |
Accessibility
- role="progressbar" carries the name plus aria-valuemin/max/now; the indeterminate bar omits aria-valuenow.
- The visible caption and percentage are aria-hidden, so the value is announced once rather than twice.
- Reduced motion replaces the sliding indeterminate bar with a still, dimmed fill.