Saltar al contenido

Aprende a crear un preloader con JQuery

22 abril, 2018
preloader con JQuery

Hoy en día, la gran mayoría de las páginas web incluyen un preloader con JQuery. Esto nos permite mejorar la experiencia del usuario, sobre todo cuando las páginas son muy pesadas. ¿Quieres aprender a crear el tuyo? Sigue leyendo…

¿Cómo crear un preloader con JQuery?

Comenzaremos configurando los estilos para nuestro preloader en JQuery.

Asegúrate de cargar jQuery en tu web. Luego crea un archivo js llamado preloader.js e incluye ese archivo en tu código. De lo contrario, no funcionará.

El código que tendremos que colocar en nuestro preloader.js será el siguiente:

Último paso

Colocaremos este código html inmediatamente después de la etiqueta <body>

Existen cientos de lugares donde descargar archivos gif de precarga, aquí os dejo uno donde podréis encontrar algunos muy buenos. https://preloaders.net/

Conclusión

Cómo habréis comprobado crear un sencillo preloader en JQuery es relativamente sencillo, y con unas pocas líneas de código podremos conseguirlo.

También existen algunos plugins que pueden hacer el trabajo por ti, pero seguramente hagan un poco más pesada tu web, por lo que os recomiendo crearlo vosotros mismo.

¿Has creado ya el tuyo? Déjame tus comentarios en el blog, o bien en mis redes sociales. ¡Gracias!