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>