2.22 #Components.loader Loader
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
Loading page, please wait
.sb-loader--inline
Inline loader
Loading page, please wait
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