Progress Bar
FreeLinear progress with indeterminate, striped, animated and glow modes across 5 variants and 4 sizes.
</>sv-progress-bar progressloadingfeedback
import { SvProgressBarComponent } from '@styloviz/overlays';Demo & usage
Basic usage
Usage example — open the gallery for the full interactive demo.
An interactive demo for this component lives in the gallery.
Open live demoMore examples
Indeterminate & striped
example.htmlAngular
2 lines
<sv-progress-bar [indeterminate]="true" variant="primary" ariaLabel="Uploading" /> <sv-progress-bar [value]="40" [striped]="true" [animated]="true" [showPercent]="true" />
React when complete
example.htmlAngular
1 lines
<sv-progress-bar [value]="uploadPct()" ariaLabel="Upload" (completed)="onUploadDone()" />
When to use
- Showing determinate progress of a known task (upload, import, multi-step save).
- Use indeterminate mode when the duration is unknown.
- For a compact circular form, use the Progress Ring.
Async states
None — this component has nothing to load, so it has no loading, empty or error state to drive.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Progress value (0–100). Ignored when `indeterminate` is true. |
| max | number | 100 | Maximum value. |
| variant | ProgressBarVariant | 'primary' | Color variant. |
| size | ProgressBarSize | 'md' | Bar height. |
| striped | boolean | false | Apply diagonal stripe pattern. |
| animated | boolean | false | Animate stripes (only visible when `striped` is true). |
| glow | boolean | false | Show pulsing glow on the fill. |
| labelPos | ProgressBarLabelPos | 'top' | Label position. |
| label | string | '' | Optional label text. If empty, the percentage is shown when labelPos is top/right. |
| announceStep | number | 5 | Quantization step for the value reported to assistive technology, in percent. |
| showPercent | boolean | true | Show percentage text. |
| estimated | boolean | false | The percentage is an ESTIMATE, not a measurement. |
| stages | readonly string[] | [] | The named phases of the work, in order. |
| stageIndex | number | 0 | Zero-based index into stages. |
| indeterminate | boolean | false | Indeterminate mode — shows an animated sliding fill. |
| ariaLabel | string | '' | Accessible name for the progress bar (recommended for standalone bars). |
| customClass | string | '' | Extra CSS classes merged onto the root wrapper. |
Outputs
| Event | Payload type | Description |
|---|---|---|
| completed | void | Emitted once when the bar first reaches 100% (determinate mode only). |
Customization & theming
- Determinate or indeterminate.
- Striped, animated and glow styles.
- Five variants and four sizes.
- `customClass` to extend the wrapper.
Best practices
- Do: Show a percentage or step label alongside the bar for context.
- Do: Switch to indeterminate only when you truly can't estimate progress.
- Don't: Don't animate stripes on long-running bars — it implies motion that isn't progress.
Accessibility
- Always exposes the `progressbar` role with `aria-valuenow`/`min`/`max` and an `aria-valuetext` when a label is set; supply `ariaLabel` to name a standalone bar.
- ⚠️ The reported value is QUANTIZED to `announceStep` (default 5). A `role="progressbar"` is a live region in everything but name — screen readers speak its value when `aria-valuenow` changes, NVDA by default — so a bar driven by a real upload used to emit a hundred announcements on the way to done and the user could not hear anything else while it ran. The kit cannot throttle the screen reader, so the only lever is how often the attribute changes. `0` and `100` always pass through exactly, and ONLY a real 0 or 100 reports as such: an in-flight 98% reports the last step below 100 (95), never a "finished" the work has not reached, and 99.6 of 100 draws 99%, not a full bar. `[announceStep]="1"` reports every percent again.
- Out-of-range values are clamped and disclosed in dev mode; a `NaN` value renders as 0%, never as `NaN`.
- Indeterminate state sets `aria-busy` and drops the now-value. A `completed` output fires once on reaching 100%.
Feedback on Progress Bar
Spotted a gap in this page, or something that didn't work as described? Comments are GitHub Discussions in the public styloviz/community repo, so posting needs a GitHub account.