Agregar un spinner a los botones de Bootstrap 3 y que cobren vida con Ajax

Cuando trabajamos con botones que disparan una acción ajax es importante indicar de algún modo que su click no fue ignorado y que un proceso se ha ejecutado en segundo plano. Un solución muy difundida es utilizando un spinner dentro del mismo botón que se hace visible cuando hacemos click en el botón y se oculta cuando la acción ajax ha finalizado.

El código del botón es super simple. Aprovecharemos los íconos o glifos ya presentes en Bootstrap 3:

<a class="btn btn-primary btn-lg btn-ajax view-ajax-related-content" href="/manzana-con-pochoclo">
  Next 
    <span class="glyphicon glyphicon-refresh"></span>
</a>

Ahora, con un poco de css y una clase auxiliar (spinning) vamos a hacer que el icono de vueltas como un paparulo.

.btn-ajax
{
  .glyphicon
  {
    width: 0;
    overflow: hidden;
    transition: width 0.3s;
    &.spinning
    {
      width: auto;
      animation: spin 1s infinite linear;
      -webkit-animation: spin2 1s infinite linear;
    }
  }
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

Ahora lo único que falta es un poco de jQuery que se ocupará de agregar y quitar la clase spinning cuando corresponda. Depende donde vayamos a utilizar el botón es probable que necesitemos estudiar los eventos globales de ajax. En este caso, tal vez el más simple, el mismo código del botón es reemplazado con la respuesta ajax, por lo tanto, no necesitamos quitar la clase spinning.

$(document)
    .on('click', '.btn-ajax', function(){
      $(this).find('.glyphicon').addClass('spinning');
    });