Progress Indicators

Contents

Loading

<div id="fancybox-loading">
 <div></div>
</div><!--/fancybox-loading-->
<div id="page-loading">
 <div></div>
</div><!--/page-loading-->
<div id="redactor-progress"><span></span></div>

Loading Animation (no images)

Can be used anywhere something is auto-loaded after a brief waiting period. 16px by default.

<span class="spinner"></span>

Meter

Used by docs for popularity, used by search for relevance.

<span class="meter" rel="tooltip" data-placement="bottom" data-original-title="Popularity: Amount">
  <i class="icon-meter"></i>
  <i class="icon-meter"></i>
  <i class="icon-meter"></i>
  <i class="icon-meter"></i>
  <i class="icon-meter"></i>
</span>

Progress

<span class="meter one">
  ...
</span>
<span class="meter two">
  ...
</span>
<span class="meter three">
  ...
</span>
<span class="meter four">
  ...
</span>
<span class="meter five">
  ...
</span>