# Progress

> Bootstrap's progress component built with Svelte 5. Use it to display progress indicators with support for stacked bars, animated backgrounds, and text labels.

Source: https://bootstrap-svelte.vercel.app/components/progress — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).

## Basic Example

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. The component is fully accessible with the proper ARIA attributes.

```html
<ProgressBar valueNow={25} />
```

## Bar Sizing

### Height

You can specify a custom height for the progress bar by setting the `style` property. The inner progress bar will automatically resize accordingly.

```html
<ProgressBar valueNow={25} style="height: 1px;" />
<ProgressBar valueNow={25} style="height: 20px;" />
```

## Labels

Add labels to your progress bars by placing text within the `ProgressBar` component.

```html
<ProgressBar valueNow={25}>
  25%
</ProgressBar>
```

## Backgrounds

Use `backgroundColorVariant` property to change the appearance of individual progress bars.

```html
<ProgressBar valueNow={25} backgroundColorVariant="success" />
<ProgressBar valueNow={50} backgroundColorVariant="info" />
<ProgressBar valueNow={75} backgroundColorVariant="warning" />
<ProgressBar valueNow={100} backgroundColorVariant="danger" />
```

For progress bars with a custom background color and labels, the component will automatically adjust the text color to ensure sufficient contrast.

```html
<ProgressBar valueNow={25} backgroundColorVariant="success">25%</ProgressBar>
<ProgressBar valueNow={50} backgroundColorVariant="info">50%</ProgressBar>
<ProgressBar valueNow={75} backgroundColorVariant="warning">75%</ProgressBar>
<ProgressBar valueNow={100} backgroundColorVariant="danger">100%</ProgressBar>
```

## Multiple Bars

You can include multiple progress components inside a `ProgressStacked` container to create a single stacked progress bar.

```html
<ProgressStacked>
  <ProgressBar valueNow={15} />
  <ProgressBar valueNow={30} backgroundColorVariant="success" />
  <ProgressBar valueNow={20} backgroundColorVariant="info" />
</ProgressStacked>
```

## Striped

Add `barProps={{ isStriped: true }}` to apply a stripe via CSS gradient over the progress bar's background color.

```html
<ProgressBar valueNow={10} barProps={{ isStriped: true }} />
<ProgressBar valueNow={25} backgroundColorVariant="success" barProps={{ isStriped: true }} />
<ProgressBar valueNow={50} backgroundColorVariant="info" barProps={{ isStriped: true }} />
<ProgressBar valueNow={75} backgroundColorVariant="warning" barProps={{ isStriped: true }} />
<ProgressBar valueNow={100} backgroundColorVariant="danger" barProps={{ isStriped: true }} />
```

## Animated Stripes

The striped gradient can also be animated. Add `barProps={{ isStriped: true, isAnimated: true }}` to animate the stripes right to left via CSS3 animations.

```html
<ProgressBar
  valueNow={75}
  barProps={{ isStriped: true, isAnimated: true }}
/>
```

## API Reference

### ProgressBar Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ariaLabel` | `string` | `'Progress Bar'` | Accessible label for screen readers describing the progress bar. |
| `backgroundColorVariant` | `string` | — | Bootstrap color variant for the progress bar. Values: 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'. |
| `barProps` | `object` | `{}` | Additional props to pass to the inner progress bar element. |
| `class` | `string` | — | Additional CSS classes to apply to the component. |
| `elementRef` | `HTMLDivElement` | `null` | Reference to the DOM element. |
| `style` | `string` | — | Inline styles to apply to the progress container. |
| `valueMax` | `number` | `100` | Maximum value for the progress bar. |
| `valueMin` | `number` | `0` | Minimum value for the progress bar. |
| `valueNow` | `number` | `0` | Current progress value, used to calculate the percentage completion. |

### barProps Object

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `isStriped` | `boolean` | `false` | Apply a striped pattern to the progress bar. |
| `isAnimated` | `boolean` | `false` | Apply an animated effect to the striped progress bar. Only works when `isStriped` is true. |
| `class` | `string` | — | Additional CSS classes to apply to the inner progress bar element. |
| `style` | `string` | — | Inline styles to apply to the inner progress bar element. |

### ProgressStacked Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | — | Additional CSS classes to apply to the stacked progress container. |
| `elementRef` | `HTMLDivElement` | `null` | Reference to the DOM element. |

### CSS Classes

The components apply Bootstrap's progress classes based on the provided props:

- `progress` - Base container class for the progress component
- `progress-bar` - Applied to the inner progress bar element
- `progress-stacked` - Applied to the container when using multiple progress bars
- `bg-{variant}` - Applied based on the backgroundColorVariant prop
- `progress-bar-striped` - Applied when barProps.isStriped is true
- `progress-bar-animated` - Applied when barProps.isAnimated is true

### Accessibility

The progress component follows WAI-ARIA patterns for progress indicators, including the proper `role="progressbar"` and ARIA attributes (`aria-valuenow`, `aria-valuemin`, `aria-valuemax`, and `aria-label`).