# Progress

> A slim progress bar from the progress element, with a sliding indeterminate state.

Page: https://pico.rusticstack.com/docs/components/progress

The native `<progress>` element is a full-width bar, 0.5rem tall, with rounded ends. Set `value` and `max` for a determinate bar.

**Example: Progress**

```html
<progress value="35" max="100"></progress>
<progress value="80" max="100"></progress>
```

## Indeterminate

Leave out `value` and the bar is indeterminate: a segment slides across the track. The animation only runs when `prefers-reduced-motion` is `no-preference`. With reduced motion the bar shows the plain track.

**Example: Indeterminate progress**

```html
<progress></progress>
```

## Accessibility

Label the bar. Either wrap it with a `<label>` or add `aria-label` or `aria-labelledby`, otherwise a screen reader announces only a percentage with no subject. For work that has no measurable end, prefer the indeterminate bar or [aria-busy](/docs/components/loading) over a fake value.

**Example: Labeled progress**

```html
<label for="upload">Uploading</label>
<progress id="upload" value="60" max="100"></progress>
```

## Customization

The fill color follows the primary color, so a [theme](/docs/customization/themes) changes it without any extra work.

| Variable | Default | Description |
| --- | --- | --- |
| `--pico-progress-color` | `var(--pico-primary-background)` | Fill color. |
| `--pico-progress-background-color` |  | Track color. |
| `--pico-transition` | `0.2s ease-in-out` | Transition of the fill width in WebKit and Blink. |