8 #Loading Spinner Loading Spinner

Displays a loading spinner in a button.

Use JavaScript to toggle the is-loading class in order to enable and disable the spinner.

Example

Please click the button

Markup

<p>Please click the button</p>
<button id="submit-button" style="padding: 0.6em 1em; border: 0; background-color: hsl(220, 50%, 50%);color: white;">Save</button>
<script>
var btn = document.querySelector('#submit-button');
btn.addEventListener('click', function() {
  btn.classList.toggle('is-loading');
});
</script>

Source: loadingspinner.css, line 1