Loda Button

This simple component animates the button's icon as data is being fetched from the server. (Click on the buttons above for a demo — a 2 second timeout imitates a server round-trip.)

The button's markup is simple:

<a href="#" class="loda-btn">
  <svg class="loda-btn__icon">...</svg>
  Mail
</a>

The classes loda-btn and loda-btn__icon are used to style the button; the styling itself is quite simple and lives in loda-button.css.

Toggling the is-loading class on the .loda-btn element starts and stops the spin animation:

button.classList.add('is-loading')
// ... later
button.classList.remove('is-loading')

The animation is created using CSS3 animation, transition and transform.