Elements

Progress Bar

Use the uk-progress-bar class to create a progress bar in your content. The progress bar width is defined by the width css style. The following classes can be used in the style parameter:

Class	Description
uk-progress-mini	Size modifier for a mini progress bar
uk-progress-small	Size modifier for a small progress bar
uk-progress-primary	Color modifier for a blue progress bar
uk-progress-success	Color modifier for a green progress bar
uk-progress-warning	Color modifier for an orange progress bar
uk-progress-danger	Color modifier for a red progress bar
uk-progress-striped	Add stripes to the progress bar
uk-active	Animate a striped progress bar

Simple progress bar

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

Size modifiers

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

<div class="uk-progress uk-progress-small">
  <div class="uk-progress-bar" style="width: 50%"></div>
</div>

<div class="uk-progress ">
  <div class="uk-progress-bar" style="width: 60%"></div>
</div>

Colored progress bars

<div class="uk-progress uk-progress-primary">
  <div class="uk-progress-bar" style="width: 30%"></div>
</div>

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

<div class="uk-progress uk-progress-warning">
  <div class="uk-progress-bar" style="width: 50%"></div>
</div>

<div class="uk-progress uk-progress-danger">
  <div class="uk-progress-bar" style="width: 60%"></div>
</div>

Combined options

<div class="uk-progress uk-progress-success uk-progress-striped uk-active">
  <div class="uk-progress-bar" style="width: 45%">loading...</div>
</div>