Defines different styles for progress bars.

\n\n

Usage

\n

The progress bar consists of a background bar and the progress bar itself, indicating the increase.

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ClassDescription
.uk-progressThis class is used on the parent container to create the background of the progress bar.
.uk-progress-barThis class needs to be added to the child element to create the actual progress bar.
\n
\n\n

Example

\n\n
\n
40%
\n
\n\n

Markup

\n\n
<div class="uk-progress">\n    <div class="uk-progress-bar" style="width: 40%;">40%</div>\n</div>
\n\n
\n\n

Size modifiers

\n\n

Add the .uk-progress-mini or .uk-progress-small class to change the size of the bar.

\n\n

Example

\n\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n\n

Markup

\n\n
<div class="uk-progress uk-progress-mini">...</div>\n<div class="uk-progress uk-progress-small">...</div>
\n\n
\n\n

Color modifiers

\n\n

To apply different colors to your progress bars, just add the .uk-progress-success, .uk-progress-warning or .uk-progress-danger class.

\n\n

Example

\n\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n\n

Markup

\n\n
<div class="uk-progress uk-progress-success">...</div>\n<div class="uk-progress uk-progress-warning">...</div>\n<div class="uk-progress uk-progress-danger">...</div>
\n\n
\n\n

Striped

\n\n

To create a striped progress bar, use the .striped class.

\n\n

Example

\n\n
\n
\n
\n\n

Markup

\n\n
<div class="uk-progress uk-progress-striped">...</div>
\n\n

You can even animate the striped bar. To do so, just add the .uk-active class.

\n\n

Example

\n\n
\n
\n
\n\n

Markup

\n\n
<div class="uk-progress uk-progress-striped uk-active">...</div>
\n\n
\n\n

Combinable

\n\n

All modifiers of the Progress component can be combined with each other.

\n\n

Example

\n\n
\n
\n
\n\n

Markup

\n\n
<div class="uk-progress uk-progress-small uk-progress-danger uk-progress-striped uk-active">...</div>
\n