Elements

If you can dream it, you can do it

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


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

Size modifiers


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


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

loading...

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