Loading button

Github Page

A simple demo of a button which can be given a loading state when needed. The loading state makes the button appear disabled, with a centered, animated loading icon.

The loading state is triggered by adding a modifier class: button--loading. It should also be set with the disabled boolean attribute so that users cannot interact with the button (click on it, tab to it etc) while it is in this state.

Examples

Static

Loading

Loading - works on any width

Code

Markup
<button type="button" class="button-primary button--loading" disabled>
  Button
</button>

Github Page