Progress
Determinate or indeterminate accent bar on a tinted track.
Preview
68%
<div class="nx-progress" role="progressbar" aria-label="Upload" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"><div class="nx-progress__bar" style="width:68%"></div></div><NxProgress value={68} label="Upload" />API
React props (NxKit)
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
value | number | 0 | 0-100, ignored when indeterminate. | |
label | string | undefined | Required accessible name — NxProgress dev-warns when absent. | |
indeterminate | boolean | false | Animated unknown-duration state (reduced-motion fallback: static 40% bar). |
Classes
| Class | Description |
|---|---|
.nx-progress | Track, accent-100 bg, full radius |
.nx-progress__bar | Accent fill bar |
.nx-progress--indeterminate | Animated sweep, respects prefers-reduced-motion |
States
indeterminate
Accessibility
- role="progressbar" always needs an accessible name via aria-label/aria-labelledby — NxProgress dev-warns in non-production when label is missing.
- Indeterminate omits aria-valuenow (unknown value); reduced-motion shows a static partial bar instead of the sweep animation.
Do / Don’t
- Do: Always pass a label describing what's loading.Don’t: Don't set aria-valuenow on an indeterminate bar.