Progress bar
Progress bars are a nice way to display informations. They exist in different colors, with or without animation. Values go from 0 to 100. To add an animation on load of the page, add the class progress-animated.
File to include
@import "components/progress-bar";<span class="progress-bar progress-animated" data-color="primary" data-value="42"></span>
<span class="progress-bar progress-animated" data-color="secondary" data-value="23"></span>
<span class="progress-bar progress-animated" data-color="success" data-value="70"></span>
<span class="progress-bar progress-animated" data-color="danger" data-value="55"></span>
<span class="progress-bar progress-animated" data-color="warning" data-value="30"></span>
<span class="progress-bar progress-animated" data-color="gray" data-value="82"></span>
<span class="progress-bar progress-animated" data-color="black" data-value="12"></span>
<span class="progress-bar progress-animated" data-color="white" data-value="64"></span>Attributes
| Name | Example value | Possible values | Default | Required |
|---|---|---|---|---|
| data-value | 42 | From 0 to 100 | None | Yes |
| data-color | success | "primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "black" | "white" | primary | No |