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?
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");
})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%"/>
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!
Todos hemos estado allí: tienes 20 pestañas abiertas, cinco PDFs y tres hojas de cálculo,…
Si ya estás usando Google Nano Banana, sabes que es la herramienta que está redefiniendo…
¿Te ha pasado? Estás en plena conversación con Gemini, fluyendo con ideas, y de repente……
¿Alguna vez soñaste con ser una de esas figuras coleccionables que tanto te fascinaban de…
Imagina caminar por las calles iluminadas de París al atardecer, con la Torre Eiffel brillando…
¿Imaginas crear aplicaciones inteligentes que resuelvan tus problemas cotidianos sin escribir una sola línea de…
Esta página utiliza cookies para mejorar su rendimiento
Ver comentarios
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
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 ._.
Lo probaré y os cuento donde está el error. Gracias!
Ya lo solucione, es el siguiente codigo:
HTML:
No se olviden tener esto antes del HEAD
Luego al final del body pongan este codigo:
$(document).ready(function() {
$(".loader").delay(2000).fadeOut("slow");
$("#overlayer").delay(2000).fadeOut("slow");
});
Gracias por tu aporte. Un saludo.