Status/ Progress Indicators

Status or Progress Indicators are visual indicators of the progress of a task being carried out by the application and to provide feedback to the user.

Explicit:

Usage

    <div class="modal explicit-loader" id="myExplicitLoader" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4>Search and Select</h4>
          </div>
          <div class="modal-body">
            <ul class="loader">
              <li class="completed"><span class="loader-image"></span><span class="loader-message">Saving data Lorem Ipsum Datum...</span></li>
              <li><span class="loader-image"></span><span class="loader-message">Saving data...</span></li>
              <li class="status"><span class="loader-message">Finalising report...</span></li>
            </ul>
          </div>
          <div class="modal-footer">
            <a href="javascript:void(0);" data-dismiss="modal">Cancel</a>
          </div>
        </div>
      </div>
    </div>
      

Trigger via Javascript

    $('#myExplicitLoader').modal()
      

Implicit: Text only (with ellipsis)

Usage

    <div class="text-loader">Updating Address Book</div>
      

Implicit: Numerical Count (with ellipsis)

Usage

    <div class="text-loader">Updating Address Book <span class="count">16/25</span> pages complete</div>
      

Implicit: Progress bar

Usage

    <div class="progress-loader">
      Updating progress bar
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="<!--pass the current value of the progress-->" aria-valuemin="0" aria-valuemax="100" style="width: <!--pass the current value of the progress in percentage-->">
        </div>
      </div>
    </div>
      

Implicit: Numerical Count with Loading Icon

Usage

    <div class="text-loader">
      <span class="loader-image"></span>Updating Address Book <span class="count">16/25</span> pages complete
    </div>