1. Home
  2. Docs
  3. Shortcode Bootstrap Visuals Manual
  4. Progress Bar

Progress Bar


The Bootstrap progress bar is an attractive way to show the progress of a process. Tha 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 and Outputs

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


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


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 Defines the Bootstrap style. Supported values:

  • danger
  • dark
  • info
  • light
  • primary
  • secondary
  • success
  • warning
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%


Was this article helpful to you? Yes No

Leave a Reply

Your email address will not be published.