Botones de carga o spinners con jquery

jquery spinner button

jquery spinner button

Este artículo será breve, pero muy educativo para aquellos que programan para la web, pues les enseñaré una forma bastante atractiva de como informar a los usuarios de que su aplicación está trabajando, para esos casos en los que usan ajax y ponen cargadores o loaders.

Pues utilizando la librería de iconos de font-awesome y jquery pueden poner un spinner animado en sus enlaces o botones de la siguiente manera.

Suponiendo que esto es el código de la ejecución de un botón y usaremos los eventos beforesend y complete.

$.ajax({
    beforeSend: function(xhr, settings) {
        $('button.mi-boton').attr('disabled', 'disabled').prepend('<i class="fa fa-refresh fa-spin"></i> ');
    },
    success: function(model, response) {
        // 
    },
    complete: function() {
        $('button.mi-boton').removeAttr('disabled').find('i.fa').remove();
    }
});

La idea como ven es muy sencilla, simplemente es inyectar código html en el botón y bloquearlo para evitar otra petición, todo esto desde el evento beforesend y luego quitar todo eso cuando tengamos una respuesta desde el evento complete.

Espero que les guste y lo usen, es limpio y no es necesario llenarse de librerías, CSS o más trucos raros, lo sencillo es lo de hoy :P.

Happy Coding!

Co-fundador de Qbit Mexhico, usuario de linux, Developer en tecnologías web.. Nicaragüense, centro en basketball, primer centro en rugby y pintor los fines de semana. Ortögrafo y ambientalista psicológico (de escritorio).. ese soy yo!

Si te ha servido compártelo y difunde nuestro blog..

Facebook Twitter LinkedIn Google+ Flickr YouTube Skype 

Compartir en...Tweet about this on TwitterPin on Pinterest0Share on LinkedIn1Share on Google+0Share on Facebook1