wiki:plugin:bootswrapper:progress-bar

Progress Bar

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Default progress bar.

60%


<progress>
<bar value="60"></bar>
</progress>


60%


<progress>
<bar value="60" showvalue="true"></bar>
</progress>


Progress bars use some of the same button and alert classes for consistent styles.

40%
20%
60%
80%


<progress>
<bar value="40" type="success"></bar>
</progress>
 
<progress>
<bar value="20" type="info"></bar>
</progress>
 
<progress>
<bar value="60" type="warning"></bar>
</progress>
 
<progress>
<bar value="80" type="danger"></bar>
</progress>


Uses a gradient to create a striped effect. Not available in IE9 and below.

40%
20%
60%
80%


<progress>
<bar value="40" type="success" striped="true"></bar>
</progress>
 
<progress>
<bar value="20" type="info" striped="true"></bar>
</progress>
 
<progress>
<bar value="60" type="warning" striped="true"></bar>
</progress>
 
<progress>
<bar value="80" type="danger" striped="true"></bar>
</progress>


Add animate=“true” to a striped progress bar to animate the stripes right to left. Not available in IE9 and below.

45%


<progress>
<bar value="45" type="info" striped="true" animate="true"></bar>
</progress>


Place multiple bars into the same <progress/> tag to stack them.

35%
20%
10%


<progress>
<bar value="35" type="success" striped="true"></bar>
<bar value="20" type="warning" striped="true"></bar>
<bar value="10" type="danger" striped="true"></bar>
</progress>


Attribute Default Value Allowed Values Description
type info success info warning danger Type of progress bar
animate optional true Animate the progress bar
striped optional true Add a striped effect to progress bar
showvalue optional true Display current value of progress bar
  • wiki/plugin/bootswrapper/progress-bar.txt
  • Last modified: 4 years ago
  • by Giuseppe Di Terlizzi