Default look of progress bars. Absolute minimum.
-Default progress bar with a vertical gradient.
+<div class="progress"> + <div class="bar" + style="width: 60%;"></div> +</div> +
Bars with stripes painted.
-Uses a gradient to create a striped effect.
+<div class="progress info + striped"> + <div class="bar" + style="width: 20%;"></div> +</div> +
Animated stripes! Not on Opera, though :(
-Takes the striped example and animates it.
+<div class="progress danger + striped active"> + <div class="bar" + style="width: 40%;"></div> +</div> +
Progress bars utilize some of the same classes as buttons and alert messages for quick styling.
+.info
.success
.danger
Alternatively, you can customize the LESS files and roll your own colors and sizes.
+Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.
+If you use the .active
class, your .striped
progress bars will animate the stripes left to right.
Progress bars use CSS3 gradients, transitions, and animations to achieve all theire effects. These features are not supported in IE7-8 or older versions of Firefox.
+Opera does not support animations at this time.
+