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..
