Installation
import { WrProgress } from 'ngwr/progress';
@Component({ imports: [WrProgress] })
export class MyComponent {}Basic usage
<wr-progress [value]="42" />Colors
<wr-progress color="success" [value]="80" />Interactive
Bar width animates between changes.
<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
Custom properties ngwr/progress publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| 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 |