Show pageOld revisionsBacklinksBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. ====== Progress Bar ====== Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars. ===== Examples ===== ==== Basic example ===== Default progress bar. <progress> <bar value="60"></bar> </progress> \\ <code html5> <progress> <bar value="60"></bar> </progress> </code> \\ ==== With label ==== <progress> <bar value="60" showvalue="true"></bar> </progress> \\ <code html5><progress> <bar value="60" showvalue="true"></bar> </progress></code> \\ ==== Contextual alternatives ==== Progress bars use some of the same button and alert classes for consistent styles. <progress> <bar value="40" type="success"></bar> </progress> <progress> <bar value="20" type="info"></bar> </progress> <progress> <bar value="60" type="warning"></bar> </progress> <progress> <bar value="80" type="danger"></bar> </progress> \\ <code html5> <progress> <bar value="40" type="success"></bar> </progress> <progress> <bar value="20" type="info"></bar> </progress> <progress> <bar value="60" type="warning"></bar> </progress> <progress> <bar value="80" type="danger"></bar> </progress> </code> \\ ==== 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> \\ ===== Options ===== <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.txt Last modified: 8 years agoby Giuseppe Di Terlizzi Log In