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 23:04] – [Attributes] 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>
 +
 +\\
 +
 +==== Striped ====
  
-===== Striped =====+Uses a gradient to create a striped effect. Not available in IE9 and below.
  
-<code html> 
 <progress> <progress>
 <bar value="40" type="success" striped="true"></bar> <bar value="40" type="success" striped="true"></bar>
Line 83: Line 98:
 <bar value="80" type="danger" striped="true"></bar> <bar value="80" type="danger" striped="true"></bar>
 </progress> </progress>
-</code> 
  
 \\ \\
  
 +<code html5>
 <progress> <progress>
 <bar value="40" type="success" striped="true"></bar> <bar value="40" type="success" striped="true"></bar>
Line 102: Line 117:
 <bar value="80" type="danger" striped="true"></bar> <bar value="80" type="danger" striped="true"></bar>
 </progress> </progress>
 +</code>
  
-===== Animated =====+\\
  
-<code><progress> +==== Animated ====
-<bar value="45" type="info" striped="true" animate="true"></bar> +
-</progress></code>+
  
-\\+Add ''animate="true"'' to a striped progress bar to animate the stripes right to left. Not available in IE9 and below.
  
 <progress> <progress>
Line 115: Line 129:
 </progress> </progress>
  
-===== Stacked =====+\\
  
-<code><progress> +<code html5><progress> 
-<bar value="35" type="success" striped="true"></bar> +<bar value="45" type="info" striped="true" animate="true"></bar>
-<bar value="20" type="warning" striped="true"></bar> +
-<bar value="10" type="danger" striped="true"></bar>+
 </progress></code> </progress></code>
  
 \\ \\
 +
 +==== Stacked ====
 +
 +Place multiple bars into the same ''<nowiki><progress/></nowiki>'' tag to stack them.
 +
 <progress> <progress>
 <bar value="35" type="success" striped="true"></bar> <bar value="35" type="success" striped="true"></bar>
Line 129: Line 146:
 <bar value="10" type="danger" striped="true"></bar> <bar value="10" type="danger" striped="true"></bar>
 </progress> </progress>
-===== Attributes ===== 
  
 +\\
 +
 +<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>
 +
 +\\
 +
 +===== Options =====
 +
 +<datatable info="false" paging="false" searching="true">
 ^ Attribute     ^ Default Value ^ Allowed Values ^ Description ^ ^ Attribute     ^ Default Value ^ Allowed Values ^ Description ^
-| ''type''      | ''info'' | ''success'', ''info'', ''warning'', ''danger'' | Type of progress bar |+| ''type''      | ''info'' | ''success'' ''info'' ''warning'' ''danger'' | Type of progress bar |
 | ''animate''   | optional | ''true'' | Animate the progress bar | | ''animate''   | optional | ''true'' | Animate the progress bar |
 | ''striped''   | optional | ''true'' | Add a striped effect to progress bar | | ''striped''   | optional | ''true'' | Add a striped effect to progress bar |
 | ''showvalue'' | optional | ''true'' | Display current value of progress bar | | ''showvalue'' | optional | ''true'' | Display current value of progress bar |
 +</datatable>
  • wiki/plugin/bootswrapper/progress-bar.1438031091.txt.gz
  • Last modified: 9 years ago
  • by Giuseppe Di Terlizzi