> For the complete documentation index, see [llms.txt](https://lewe.gitbook.io/lewe-bootstrap-visuals/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lewe.gitbook.io/lewe-bootstrap-visuals/shortcodes/progress-bar.md).

# Progress Bar

The Bootstrap progress bar is an attractive way to show the progress of a process. The shortcode supports and ID parameter so you can address it via Javascript to change the progress by changing its width style to a different percent value.

## Examples

{% code overflow="wrap" %}

```
[bsv-progress]
```

{% endcode %}

<figure><img src="/files/2af3b9GxdNpbedATxoGr" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" %}

```
[bsv-progress style="danger" striped="yes" width="320px" progress="43" id="pb1234"]
```

{% endcode %}

<figure><img src="/files/evbDdjFpvVvFb9Yo2rgy" alt=""><figcaption></figcaption></figure>

## Format

{% code overflow="wrap" %}

```
[bsv-progress parameter="value" ...]
```

{% endcode %}

## Parameters

| Parameter | Description                                                                                                                                                                             | Default    |
| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| animated  | Animated the progress bar. Only works when striped=”yes”                                                                                                                                | no         |
| id        | Element ID. Can be used to address the percentage via Javascript. Must be unique on the page.                                                                                           | *no value* |
| progress  | The progress in percent, e.g. 75                                                                                                                                                        | 75         |
| striped   | Display as a striped propgress bar.                                                                                                                                                     | no         |
| style     | <p>Defines the Bootstrap style. Supported values:</p><ul><li>danger</li><li>dark</li><li>info</li><li>light</li><li>primary</li><li>secondary</li><li>success</li><li>warning</li></ul> | primary    |
| width     | Here you can specify a custom width in px or %. The default is 100% so the progress bar will occupy the whole width of the parent element.                                              | 100%       |