Progress Component
React progress component with linear and circular variants, determinate and indeterminate modes, value labels and full ARIA progressbar semantics.
Import
javascript
1import { Progress } from "@neuctra/ui";Linear
65%
Circular
60%
90%
Indeterminate
Omit value while the duration is unknown.
Props
All available props for the Progress component.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Current value; omit for indeterminate |
| max | number | 100 | Maximum value |
| variant | "linear" | "circular" | "linear" | Bar or ring |
| size | "sm" | "md" | "lg" | "md" | Track thickness / ring diameter |
| showValue | boolean | false | Show the percentage |
| label | string | — | Accessible name for the progressbar |
| colorClassName | string | bg-primary / stroke-primary | Fill color class |
| trackClassName | string | — | Styles the track behind the fill (the muted background). |
| fillClassName | string | — | Styles the filled portion — the linear bar or circular arc. |
| valueClassName | string | — | Styles the percentage text shown when showValue is set. |
Accessibility
- Renders role="progressbar" with aria-valuemin / aria-valuemax / aria-valuenow.
- aria-valuenow is omitted in indeterminate mode, as the ARIA spec requires.
- Pass label so the bar has an accessible name.
Frequently Asked Questions
How do I install and import the Progress component?
Install the @neuctra/ui package, then import it with: import { Progress } from "@neuctra/ui";
What variants and sizes does Progress support?
Progress supports variants: linear, circular and sizes: sm, md, lg. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the Progress component accessible?
Progress is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.