Message / Progress-bar

<div class="uk-grid" data-uk-grid-margin>
 
  <div class="uk-width-medium-1-2">
 
    <div class="uk-margin">
      <div class="uk-alert" data-uk-alert>
        <a class="uk-alert-close uk-close"></a>
        <p>Info message</p>
      </div>
    </div>
 
    <div class="uk-margin">
      <div class="uk-alert uk-alert-success" data-uk-alert>
        <a class="uk-alert-close uk-close"></a>
        <p>Success message</p>
      </div>
    </div>
 
    <div class="uk-margin">
      <div class="uk-alert uk-alert-warning" data-uk-alert>
        <a class="uk-alert-close uk-close"></a>
        <p>Warning message</p>
      </div>
    </div>
 
    <div class="uk-margin">
      <div class="uk-alert uk-alert-danger" data-uk-alert>
        <a class="uk-alert-close uk-close"></a>
        <p>Danger message</p>
      </div>
    </div>
 
  </div>
 
  <div class="uk-width-medium-1-2">
 
    <div class="uk-margin">
      <div class="uk-progress">
        <div class="uk-progress-bar" style="width: 15%;">15%</div>
      </div>
    </div>
 
    <div class="uk-margin">
      <div class="uk-progress uk-progress-success">
        <div class="uk-progress-bar" style="width: 33%;">33%</div>
      </div>
    </div>
 
    <div class="uk-margin">
      <div class="uk-progress uk-progress-warning">
        <div class="uk-progress-bar" style="width: 99%;">99%</div>
      </div>
    </div>
 
    <div class="uk-margin">
      <div class="uk-progress uk-progress-danger">
        <div class="uk-progress-bar" style="width: 80%;">80%</div>
      </div>
    </div>
 
  </div>
 
</div>