Progress

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

40%

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>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

JFlickr Module