wiki:plugin:bootswrapper:progress-bar

This is an old revision of the document!

Progress Bar

Basic Example

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


60%

With label

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


60%

Contextual alternatives

<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>


40%
20%
60%
80%

Striped

<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>


40%
20%
60%
80%

Animated

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


45%

Stacked

<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>


35%
20%
10%

Attributes

Attribute Default Value Allowed Values Description
type info success, info, warning, danger Type of alert
dismiss optional true Create a dismissible alert
icon optional Font icon class (eg. Glyphicon or Font-Awesome)
  • wiki/plugin/bootswrapper/progress-bar.1438030967.txt.gz
  • Last modified: 9 years ago
  • by Giuseppe Di Terlizzi