Progress

Progress bar comes in two variations: normal or slim. To create a progress bar, you need a DOM element with the classes lui progressing progress and a child DOM element with 3 attributes :

• the class indicator
• an integer data-percentage which will be used as the value displayed
• the inline style width: XX%

Examples

<div class="lui progressing progress">
  <div class="indicator" data-percentage="75" style="width: 75%;"></div>
</div>

<div class="lui slim progressing progress">
  <div class="indicator" data-percentage="45" style="width: 45%;"></div>
</div>

You can attach a progress to a callout by adding the class attached to the progress bar element.

<div class="lui up callout">
  <div class="lui attached slim secondary progressing progress">
    <div class="indicator" data-percentage="45" style="width: 45%;"></div>
  </div>
  <h4>You can attach a progress to a callout</h4>
</div>