1====== Progress Bar ======
2
3Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
4
5===== Examples =====
6
7==== Basic example =====
8
9Default progress bar.
10
11<progress>
12<bar value="60"></bar>
13</progress>
14
15\\
16
17<code html5>
18<progress>
19<bar value="60"></bar>
20</progress>
21</code>
22
23\\
24
25==== With label ====
26
27<progress>
28<bar value="60" showvalue="true"></bar>
29</progress>
30
31\\
32
33<code html5><progress>
34<bar value="60" showvalue="true"></bar>
35</progress></code>
36
37\\
38
39==== Contextual alternatives ====
40
41Progress bars use some of the same button and alert classes for consistent styles.
42
43<progress>
44<bar value="40" type="success"></bar>
45</progress>
46
47<progress>
48<bar value="20" type="info"></bar>
49</progress>
50
51<progress>
52<bar value="60" type="warning"></bar>
53</progress>
54
55<progress>
56<bar value="80" type="danger"></bar>
57</progress>
58
59\\
60
61<code html5>
62<progress>
63<bar value="40" type="success"></bar>
64</progress>
65
66<progress>
67<bar value="20" type="info"></bar>
68</progress>
69
70<progress>
71<bar value="60" type="warning"></bar>
72</progress>
73
74<progress>
75<bar value="80" type="danger"></bar>
76</progress>
77</code>
78
79\\
80
81==== Striped ====
82
83Uses a gradient to create a striped effect. Not available in IE9 and below.
84
85<progress>
86<bar value="40" type="success" striped="true"></bar>
87</progress>
88
89<progress>
90<bar value="20" type="info" striped="true"></bar>
91</progress>
92
93<progress>
94<bar value="60" type="warning" striped="true"></bar>
95</progress>
96
97<progress>
98<bar value="80" type="danger" striped="true"></bar>
99</progress>
100
101\\
102
103<code html5>
104<progress>
105<bar value="40" type="success" striped="true"></bar>
106</progress>
107
108<progress>
109<bar value="20" type="info" striped="true"></bar>
110</progress>
111
112<progress>
113<bar value="60" type="warning" striped="true"></bar>
114</progress>
115
116<progress>
117<bar value="80" type="danger" striped="true"></bar>
118</progress>
119</code>
120
121\\
122
123==== Animated ====
124
125Add ''animate="true"'' to a striped progress bar to animate the stripes right to left. Not available in IE9 and below.
126
127<progress>
128<bar value="45" type="info" striped="true" animate="true"></bar>
129</progress>
130
131\\
132
133<code html5><progress>
134<bar value="45" type="info" striped="true" animate="true"></bar>
135</progress></code>
136
137\\
138
139==== Stacked ====
140
141Place multiple bars into the same ''<nowiki><progress/></nowiki>'' tag to stack them.
142
143<progress>
144<bar value="35" type="success" striped="true"></bar>
145<bar value="20" type="warning" striped="true"></bar>
146<bar value="10" type="danger" striped="true"></bar>
147</progress>
148
149\\
150
151<code html5><progress>
152<bar value="35" type="success" striped="true"></bar>
153<bar value="20" type="warning" striped="true"></bar>
154<bar value="10" type="danger" striped="true"></bar>
155</progress></code>
156
157\\
158
159===== Options =====
160
161<datatable info="false" paging="false" searching="true">
162^ Attribute     ^ Default Value ^ Allowed Values ^ Description ^
163| ''type''      | ''info'' | ''success'' ''info'' ''warning'' ''danger'' | Type of progress bar |
164| ''animate''   | optional | ''true'' | Animate the progress bar |
165| ''striped''   | optional | ''true'' | Add a striped effect to progress bar |
166| ''showvalue'' | optional | ''true'' | Display current value of progress bar |
167</datatable>