# Progress

> Horizontal progress bar with theme colors and an animated fill.

Source: https://ngwr.dev/reference/components/progress  
Kind: Component, Standalone

## Installation

```angular-ts
import { WrProgress } from 'ngwr/progress';

@Component({ imports: [WrProgress] })
export class MyComponent {}
```

## Basic usage

```html
<wr-progress [value]="42" />
```

## Colors

```html
<wr-progress color="success" [value]="80" />
```

## Interactive

Bar width animates between changes.

```html
<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 |