2.22 #Components.loader Loader

Toggle example guides Toggle HTML markup

Simple loader, witn inline option. For a loader inside a button, check the Button Loader component.

Browser support: IE10+, Safari6.2+, Firefox31+, Chrome30+

Default styling
.sb-loader--inline
Inline loader
Markup
<div class="sb-loader [modifier class]" role="alert" aria-busy="true">
  <svg viewBox="0 0 50 50" class="sb-spinner" aria-hidden="true">
    <defs>
      <path id="path-loader-[modifier class]" d="M25 50C11.2 50 0 38.8 0 25S11.2 0 25 0s25 11.2 25 25-11.2 25-25 25zm0-6.5c10.2 0 18.5-8.3 18.5-18.5S35.2 6.5 25 6.5 6.5 14.8 6.5 25 14.8 43.5 25 43.5z"/>
    </defs>
    <g fill="none" fill-rule="evenodd">
      <mask id="mask-loader-[modifier class]" fill="#fff">
        <use xlink:href="#path-loader-[modifier class]"/>
      </mask>
      <use class="sb-spinner__secondary" transform="matrix(-1 0 0 1 50 0)" xlink:href="#path-loader-[modifier class]"/>
      <path class="sb-spinner__primary" d="M0 0h26v26H0z" mask="url(#mask-loader-[modifier class])"/>
      <path class="sb-spinner__primary" d="M6.5 26c0 2-1.4 3.3-3.2 3.3C1.5 29.3 0 28 0 26h6.5z" mask="url(#mask-loader-[modifier class])" transform="matrix(-1 0 0 1 6.522 0)"/>
      <path class="sb-spinner__primary" d="M29.3 0C27.5 0 26 1.5 26 3.3c0 1.8 1.5 3.2 3.3 3.2V0z" mask="url(#mask-loader-[modifier class])" transform="matrix(-1 0 0 1 55.435 0)"/>
    </g>
  </svg>
  <span class="sb-loader__label">Loading page, please wait</span>
</div>
Source: components/_loader.scss, line 3