wiki:plugin:bootswrapper:progress-bar

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
wiki:plugin:bootswrapper:progress-bar [2015/07/27 22:58] Giuseppe Di Terlizziwiki:plugin:bootswrapper:progress-bar [2016/02/19 15:43] (current) Giuseppe Di Terlizzi
Line 1: Line 1:
 ====== Progress Bar ====== ====== Progress Bar ======
  
-{{page>:wiki:plugin:bootswrapper:menu&inline&nofooter}}+Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
  
-===== Basic Example =====+===== Examples =====
  
-<code html><progress>+==== Basic example ===== 
 + 
 +Default progress bar. 
 + 
 +<progress>
 <bar value="60"></bar> <bar value="60"></bar>
-</progress></code>+</progress>
  
 \\ \\
  
 +<code html5>
 <progress> <progress>
 <bar value="60"></bar> <bar value="60"></bar>
 </progress> </progress>
 +</code>
  
-===== With label =====+\\
  
-<code html><progress>+==== With label ==== 
 + 
 +<progress>
 <bar value="60" showvalue="true"></bar> <bar value="60" showvalue="true"></bar>
-</progress></code>+</progress>
  
 \\ \\
  
-<progress>+<code html5><progress>
 <bar value="60" showvalue="true"></bar> <bar value="60" showvalue="true"></bar>
-</progress>+</progress></code> 
 + 
 +\\ 
 + 
 +==== Contextual alternatives ====
  
-===== Contextual alternatives =====+Progress bars use some of the same button and alert classes for consistent styles.
  
-<code html> 
 <progress> <progress>
 <bar value="40" type="success"></bar> <bar value="40" type="success"></bar>
Line 45: Line 56:
 <bar value="80" type="danger"></bar> <bar value="80" type="danger"></bar>
 </progress> </progress>
-</code> 
  
 \\ \\
  
 +<code html5>
 <progress> <progress>
 <bar value="40" type="success"></bar> <bar value="40" type="success"></bar>
Line 64: Line 75:
 <bar value="80" type="danger"></bar> <bar value="80" type="danger"></bar>
 </progress> </progress>
 +</code>
  
 +\\
  
-===== Attributes =====+==== Striped ==== 
 + 
 +Uses a gradient to create a striped effect. Not available in IE9 and below. 
 + 
 +<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> 
 + 
 +\\ 
 + 
 +<code html5> 
 +<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> 
 +</code> 
 + 
 +\\ 
 + 
 +==== Animated ==== 
 + 
 +Add ''animate="true"'' to a striped progress bar to animate the stripes right to left. Not available in IE9 and below. 
 + 
 +<progress> 
 +<bar value="45" type="info" striped="true" animate="true"></bar> 
 +</progress> 
 + 
 +\\ 
 + 
 +<code html5><progress> 
 +<bar value="45" type="info" striped="true" animate="true"></bar> 
 +</progress></code> 
 + 
 +\\ 
 + 
 +==== Stacked ==== 
 + 
 +Place multiple bars into the same ''<nowiki><progress/></nowiki>'' tag to stack them. 
 + 
 +<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> 
 + 
 +\\ 
 + 
 +<code html5><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></code> 
 + 
 +\\
  
-^ Attribute    ^ Default Value ^ Allowed Values ^ Description ^ +===== Options =====
-| ''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) |+
  
 +<datatable info="false" paging="false" searching="true">
 +^ 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 |
 +</datatable>
  • wiki/plugin/bootswrapper/progress-bar.1438030683.txt.gz
  • Last modified: 9 years ago
  • by Giuseppe Di Terlizzi