Progress Bars
Defines different styles for progress bars.
Usage
The progress bar consists of a background bar and the progress bar itself, indicating the increase.
Class | Description |
---|---|
.uk-progress |
This class is used on the parent container to create the background of the progress bar. |
.uk-progress-bar |
This class needs to be added to the child element to create the actual progress bar. |
Example
Markup
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 40%;">40%</div>
</div>
Size modifiers
Add the .uk-progress-mini
or .uk-progress-small
class to change the size of the bar.
Example
Markup
<div class="uk-progress uk-progress-mini">...</div>
<div class="uk-progress uk-progress-small">...</div>
Color modifiers
To apply different colors to your progress bars, just add the .uk-progress-success
, .uk-progress-warning
or .uk-progress-danger
class.
Example
Markup
<div class="uk-progress uk-progress-success">...</div>
<div class="uk-progress uk-progress-warning">...</div>
<div class="uk-progress uk-progress-danger">...</div>
Striped
To create a striped progress bar, use the .uk-progress-striped
class.
Example
Markup
<div class="uk-progress uk-progress-striped">...</div>
You can even animate the striped bar. To do so, just add the .uk-active
class.
Example
Markup
<div class="uk-progress uk-progress-striped uk-active">...</div>
Combinable
All modifiers of the Progress component can be combined with each other.
Example
Markup
<div class="uk-progress uk-progress-small uk-progress-danger uk-progress-striped uk-active">...</div>