Nearest office: BEVERLY HILLS, CA 90210
Location: USA
1-800-987-0654 321
Language: English

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{71507b92be22e07c4759c8fd9854a0d0fad4b29f75ba3f42f228f7f385ca56ca}

Markup

<div class="uk-progress">
    <div class="uk-progress-bar" style="width: 40{71507b92be22e07c4759c8fd9854a0d0fad4b29f75ba3f42f228f7f385ca56ca};">40{71507b92be22e07c4759c8fd9854a0d0fad4b29f75ba3f42f228f7f385ca56ca}</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 .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>
You want to know what else can our team? Well, download and see...
0

Your Cart