# 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="https://2850223474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOT4oO0pn3LrvJLuVbRqg%2Fuploads%2Fgit-blob-1a020aee06d399f14540970df38dfb7709c2d7b8%2Fscreenshot-progressbar-1.png?alt=media" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" %}

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

{% endcode %}

<figure><img src="https://2850223474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOT4oO0pn3LrvJLuVbRqg%2Fuploads%2Fgit-blob-5d494355fdfb3d511f1a8f5af9b78d7fdf22b0ed%2Fscreenshot-progressbar-2.png?alt=media" 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%       |