Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
wiki:plugin:bootswrapper:progress-bar [2015/07/27 22:58] – Giuseppe Di Terlizzi | wiki:plugin:bootswrapper:progress-bar [2016/02/19 15:43] (current) – Giuseppe Di Terlizzi | ||
---|---|---|---|
Line 1: | Line 1: | ||
====== Progress Bar ====== | ====== Progress Bar ====== | ||
- | {{page>: | + | Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars. |
- | ===== Basic Example | + | ===== Examples |
- | <code html>< | + | ==== Basic example ===== |
+ | |||
+ | Default progress bar. | ||
+ | |||
+ | < | ||
<bar value=" | <bar value=" | ||
- | </ | + | </ |
\\ | \\ | ||
+ | <code html5> | ||
< | < | ||
<bar value=" | <bar value=" | ||
</ | </ | ||
+ | </ | ||
- | ===== With label ===== | + | \\ |
- | <code html>< | + | ==== With label ==== |
+ | |||
+ | < | ||
<bar value=" | <bar value=" | ||
- | </ | + | </ |
\\ | \\ | ||
- | < | + | <code html5>< |
<bar value=" | <bar value=" | ||
- | </ | + | </ |
+ | |||
+ | \\ | ||
+ | |||
+ | ==== Contextual alternatives ==== | ||
- | ===== Contextual alternatives ===== | + | Progress bars use some of the same button and alert classes for consistent styles. |
- | <code html> | ||
< | < | ||
<bar value=" | <bar value=" | ||
Line 45: | Line 56: | ||
<bar value=" | <bar value=" | ||
</ | </ | ||
- | </ | ||
\\ | \\ | ||
+ | <code html5> | ||
< | < | ||
<bar value=" | <bar value=" | ||
Line 64: | Line 75: | ||
<bar value=" | <bar value=" | ||
</ | </ | ||
+ | </ | ||
+ | \\ | ||
- | ===== Attributes | + | ==== Striped |
+ | |||
+ | Uses a gradient to create a striped effect. Not available in IE9 and below. | ||
+ | |||
+ | < | ||
+ | <bar value=" | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <bar value=" | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <bar value=" | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <bar value=" | ||
+ | </ | ||
+ | |||
+ | \\ | ||
+ | |||
+ | <code html5> | ||
+ | < | ||
+ | <bar value=" | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <bar value=" | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <bar value=" | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <bar value=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | \\ | ||
+ | |||
+ | ==== Animated ==== | ||
+ | |||
+ | Add '' | ||
+ | |||
+ | < | ||
+ | <bar value=" | ||
+ | </ | ||
+ | |||
+ | \\ | ||
+ | |||
+ | <code html5>< | ||
+ | <bar value=" | ||
+ | </ | ||
+ | |||
+ | \\ | ||
+ | |||
+ | ==== Stacked ==== | ||
+ | |||
+ | Place multiple bars into the same ''< | ||
+ | |||
+ | < | ||
+ | <bar value=" | ||
+ | <bar value=" | ||
+ | <bar value=" | ||
+ | </ | ||
+ | |||
+ | \\ | ||
+ | |||
+ | <code html5>< | ||
+ | <bar value=" | ||
+ | <bar value=" | ||
+ | <bar value=" | ||
+ | </ | ||
+ | |||
+ | \\ | ||
- | ^ Attribute | + | ===== Options ===== |
- | | '' | + | |
- | | '' | + | |
- | | '' | + | |
+ | < | ||
+ | ^ Attribute | ||
+ | | '' | ||
+ | | '' | ||
+ | | '' | ||
+ | | '' | ||
+ | </ |