import { Component } from '@angular/core';
import { WrProgress } from 'ngwr/progress';
@Component({ imports: [WrProgress] })
export class MyComponent {}Progress
A bar that shows how far a task has got.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic usage
<wr-progress [value]="42" />Colors
<wr-progress color="success" [value]="80" />Interactive
value runs from 0 to 100, and the bar animates each change.
<wr-progress [value]="value()" />
<wr-slider [(value)]="value" />API
| Name | Description | Type | Default |
|---|---|---|---|
ariaLabel | Accessible name — role="progressbar" needs one. Falls back to progress.label. | string | null | null |
color | Bar color. | WrColor | 'primary' |
value | Progress value, clamped to [0, 100]. | number | 0 |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/progress's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-progress-bar | var(--wr-color-primary) | .wr-progress +1 variant override |
--wr-progress-height | 0.5rem | .wr-progress |
--wr-progress-radius | var(--wr-border-radius-pill) | .wr-progress |
--wr-progress-track | var(--wr-color-fill) | .wr-progress +1 variant override |
See also
Component SpinnerAn inline loading indicator.Service WrLoadingBarA progress bar at the top of the page for requests and other long tasks.Component SkeletonA placeholder block shown while content loads.Component Meter GroupOne bar split into labelled parts, with a legend.Component GaugeA read-only semicircle dial for a single value.