# swc-progress-bar

A progress bar is a non-focusable, read-only bar that shows the progression of a system operation such as downloading, uploading, or processing.

```js
import '@adobe/spectrum-wc/components/progress-bar/index.js';
// <swc-progress-bar></swc-progress-bar>
```

## Attributes

| Name               | Type                                     | Default | Description                                                                                                                                                                         |
| ------------------ | ---------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value`            | `number`                                 | `0`     | Current value. Sanitized via `clampedValue` for rendering and `aria-valuenow`.                                                                                                      |
| `min-value`        | `number`                                 | `0`     | Bottom of the value range.                                                                                                                                                          |
| `max-value`        | `number`                                 | `100`   | Top of the value range.                                                                                                                                                             |
| `accessible-label` | `string`                                 | `''`    | Rare-case accessible-name fallback used when there is no visible `label` slot content (for example, a data grid of meters). Renders into `aria-label` on the role element when set. |
| `value-label`      | `string \| undefined`                    | -       | Custom value text (e.g. `"1 of 4"`). Overrides the auto-formatted value in both rendered text and `aria-valuetext`.                                                                 |
| `label-position`   | `LinearProgressLabelPosition`            | `'top'` | Position of the label relative to the bar.                                                                                                                                          |
| `static-color`     | `LinearProgressStaticColor \| undefined` | -       | Static color override for use on images or colored backgrounds.                                                                                                                     |
| `size`             | `ElementSize`                            | -       | The size of the progress bar.                                                                                                                                                       |
| `indeterminate`    | `boolean`                                | `false` | When true, the bar runs a looping fill animation and all four `aria-value*` attributes are omitted from the DOM. The visible value text is also omitted.                            |

## Slots

| Name          | Description                                                                                                                                                     |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `label`       | Visible label for the progress bar. Referenced via `aria-labelledby` on the shadow `progressbar` role element.                                                  |
| `description` | Additional description text below the progress bar. Referenced via `aria-describedby` on the shadow `progressbar` role element when assigned nodes are present. |

## CSS Custom Properties

| Name                                | Description                                                                                      |
| ----------------------------------- | ------------------------------------------------------------------------------------------------ |
| `--swc-linear-progress-fill-color`  | Color of the bar fill. Defaults to the accent content color token.                               |
| `--swc-linear-progress-track-color` | Color of the bar track. Defaults to the track color token.                                       |
| `--swc-linear-progress-text-color`  | Color of the label and value text. Defaults to the neutral subdued content color token.          |
| `--swc-linear-progress-thickness`   | Block size of the track and fill. Defaults to the size-specific progress bar thickness token.    |
| `--swc-linear-progress-font-size`   | Font size of the label and value text. Defaults to the size-specific font size token.            |
| `--swc-linear-progress-top-to-text` | Spacing between the bar and the text. Defaults to the size-specific component top-to-text token. |