Back to componentszyra-progress
Progress
Linear progress bars for uploads, task completion, storage usage, and any measurable loading state.
Component preview
Explore the available states and the real library behavior for this component.
zyra-progress Playground
Control every input live and see the result instantly
Controls
size
boolean inputs
variant
value — 65%
Preview
65%
Generated Code
<zyra-progress
[value]="65"
[showLabel]="true"
/>All Variants
default
70%
success
70%
warning
70%
danger
70%
info
70%
Sizes
sm
md
lg
Indeterminate
default
success
warning
danger
info
Real World Examples
Storage Usage
Documents
72%
Images
91%
Videos
38%
Task Completion
Design
100%
Development
65%
Testing
20%
Loading States
Fetching data
Uploading
Copy-paste example
Drop this into your Angular standalone component and it works out of the box.
import { Component } from '@angular/core';
import { ZyraProgress } from 'zyra-ng-ui';
@Component({
selector: 'app-demo',
standalone: true,
imports: [ZyraProgress],
template: `
<zyra-progress
variant="success"
[value]="72"
[showLabel]="true"
/>
`,
})
export class DemoComponent {}Variants
All the visual modes and states available for this component.
defaultAccent-colored bar for general usage
successGreen bar for completed or healthy states
warningAmber bar for near-limit states
dangerRed bar for critical or over-limit states
indeterminateAnimated bar for unknown duration loading
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' | 'success' | 'warning' | 'danger' | 'default' | Track fill color |
showLabel | boolean | false | Shows the percentage above the bar |
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