# 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>