Saltar al contenido

Aprende a crear un preloader con JQuery

22 abril, 2018
preloader con JQuery
Índice

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

Configurar