Progress
A native progress indicator for measured or unknown completion.
Interactive preview
Importing sample records · 64%
Importing sample records · 64%
Importing sample records · 64%
Preparing sample files · indeterminate
Installation
Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.
npx antiflex-ui@0.1.0-alpha.2 add progressThis site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.
Usage
<Progress value={64} max={100} aria-label="Importing records" />
<Progress aria-label="Preparing files" />API reference
All components forward native attributes, className, and refs to their underlying elements.
| Prop | Type | Default |
|---|---|---|
value | number | undefined | undefined (indeterminate) |
max | number | 100 |
size | sm | md | lg | md |
Accessibility
Provide aria-label, aria-labelledby, or an associated native Label. A missing/non-finite value is indeterminate. Finite values clamp between zero and max; invalid max falls back to 100. Native progress semantics expose the measured value. Progress is not a live region; announce meaningful milestones separately and use aria-busy on the region being updated. Reduced motion stops indeterminate animation. Ref targets HTMLProgressElement.