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!
¿Quieres poner texto detrás de un video? Aprende cómo con CapCut en este sencillo tutorial…
Aprende a crear voces con IA sorprendentemente reales para vídeos, podcasts y más. Lee nuestro…
TikTok se reinventa con TikTok Notes: una app de fotos y estilo de vida. Conoce…
¡Descubre Haiper! La alternativa gratuita a Sora de OpenAI para crear vídeos increíbles. Fácil de…
¿Buscas una alternativa a ChatGPT? Mistral AI y su chatbot Le Chat ofrecen una experiencia…
Más que un resumen: Adobe AI Assistant te ayuda a navegar y comprender PDFs con…
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.