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?

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

<script src=»/jquery.js»><script>
<script src=»/preloader.js><script>

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

<div id=»overlayer»></div>
<span class=»loader»>
<span class=»loader-inner»></span>
</span>
<h1>Ejemplo Crear Preloader en Jquery</h1>
<img src=»imagenes/logo.png» alt=»» width=»30%»/>

Conclusión

Como habrás 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!

Contenido Relacionado

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Comentarios (4)

El preloader no Termina nunca, al subirlo por ftp no carga ningun gif pero creo que es por mi pero el punto es que no encuentro solucion

Responder

Buenos días y perdona la tardanza en responderte. ¿Has revisado el código? A veces un simple guión o punto y coma al final de código suele provocar estos fallos. Si persiste el error dímelo y tratataré de ayudarte. Un saludo.

Responder

A mi tampoco me funciona, no se quita el preload y oculta toda la pagina ._.

Responder

Lo probaré y os cuento donde está el error. Gracias!

Responder