Aprende a crear un 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.
body, html {
height: 100%;
width:100%;
text-align: center;
background:#dcdcdc;
margin:0;
padding:0;
position:relative;
}
h1 {
color:#4a4a4a;
text-align:center;
}
img {
margin: 0 auto;
display:block;
}
/*PRELOADING------------ */
#overlayer {
width:100%;
height:100%;
position:absolute;
z-index:1;
background:#4a4a4a;
}
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: absolute;
z-index:3;
border: 4px solid #Fff;
top: 50%;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
@keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}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:
$(window).load(function() {
$(".loader").delay(2000).fadeOut("slow");
$("#overlayer").delay(2000).fadeOut("slow");
})Ú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
-
-
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.
-
-
A mi tampoco me funciona, no se quita el preload y oculta toda la pagina ._.
-
Michel Alexis SV dice:
Ya lo solucione, es el siguiente codigo:
HTML:
No se olviden tener esto antes del HEADLuego al final del body pongan este codigo:
$(document).ready(function() {
$(".loader").delay(2000).fadeOut("slow");
$("#overlayer").delay(2000).fadeOut("slow");
});
Michel Alexis SV Deja una respuesta
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