Progress and activity

Provide up-to-date feedback on the progress of an action or that the system is actively retrieving data or performing an operation with flexible progress bars and activity indicators.

Progress Bars

Show the percentage or change the color using the color status by adding .progress-bar-info, .progress-bar-success, .progress-bar-warning or .progress-bar-danger to .progress-bar.

63%
77%
<div class="progress progress-striped active ">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 45%;"></div>
  </div>

  <div class="progress progress-striped active ">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 63%;">
      63%
    </div>
  </div>
  

Activity indicators

Help to reassure the user that the system is actively retrieving data or performing an operation.
Two options available:

On the top bar and widgets

<div class="spinner">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
  </div>
  

On navigator buttons or small sized elements.

<i class="fa fa-circle-o-notch fa-spin"></i>