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 |
Tokens
CSS custom properties zyra-progress reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Track background--zyra-color-progress-track-bg | var(--zyra-color-surface-inset) | Background color of the unfilled track. |
Track border--zyra-color-progress-track-border | var(--zyra-color-border-color) | Border color of the track. |
Label color--zyra-color-progress-label-color | var(--zyra-color-foreground-muted) | Color of the percentage/custom label above the bar. |
Default fill--zyra-color-progress-default | var(--zyra-color-primary) | Bar fill color for the default variant. |
Success fill--zyra-color-progress-success | var(--zyra-color-success-foreground) | Bar fill color for the success variant. |
Warning fill--zyra-color-progress-warning | var(--zyra-color-warning-foreground) | Bar fill color for the warning variant. |
Danger fill--zyra-color-progress-danger | var(--zyra-color-danger-foreground) | Bar fill color for the danger variant. |
Info fill--zyra-color-progress-info | var(--zyra-color-info-foreground) | Bar fill color for the info variant. |
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