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

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

Format

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

Parameters

ParameterDescriptionDefault

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

Defines the Bootstrap style. Supported values:

  • danger

  • dark

  • info

  • light

  • primary

  • secondary

  • success

  • warning

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%

Last updated