Progress
Linear progress bars for uploads, task completion, storage usage, and any measurable loading state.
65%
API
All inputs and configuration options for zyra-progress.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current progress value (0–max) |
max | number | 100 | Maximum value |
variant | 'default' | 'info' | 'success' | 'warning' | 'danger' | 'default' | Track fill color |
size | 'sm' | 'md' | 'lg' | 'md' | Height of the progress bar |
showLabel | boolean | false | Shows the percentage above the bar |
label | string | '' | Custom label text shown instead of the auto percentage |
indeterminate | boolean | false | Animates the bar for unknown-duration loading |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Renders with role="progressbar", aria-valuenow, aria-valuemin, and aria-valuemax
- Indeterminate mode omits aria-valuenow to signal unknown progress
- Pair with a visible or visually-hidden label describing what is loading