Stylabilla

2.3.4 #Components.button.loader Loader

JavaScript is required for:

Adding/removing loader markup inside button
Adding/removing loader class and disabled attribute

Obs: do not remove button text when applying the loader, so the button can keep the same size.

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

Default styling

.sb-btn--primary

Primary button

.sb-btn--secondary

Secondary button

.sb-btn--subtle

Subtle button

.sb-btn--danger

Danger button

Markup

<button class="sb-btn [modifier class] sb-btn--loader" disabled>
  <div class="sb-loader sb-loader--button" role="alert" aria-busy="true">
    <svg viewBox="0 0 50 50" class="sb-spinner">
      <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>
  </div>
  Button
</button>

Source: components/_button.scss, line 343