Hugui Dugui Blog | Preloader al cargar una sección

Con unas cuantas líneas de código se puede hacer un efecto agradable para el usuario cuando entra a una sección de un sitio web. Con algunos ajustes puedes hacer algo muy elegante que le da un toque a tu web.

Hay que poner debajo de la etiqueta <body> lo siguiente:

<div class="preloader">
    <div class="preloader-image">
    </div>
</div>

El div con clase preloader ocupará todo el espacio en pantalla y tendrá algún color y/o transparencia y el div de clase preloader-image mostrará una imagen o gif centrada usando las siguientes líneas de css:

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #229fbc;
  z-index: 13000;
  height: 100%;
}
 
.preloader-image {
  width: 169px;
  height: 124px;
  position: absolute;
  left: 45%;
  top: 50%;
  background: url(ruta/a/tu/imagen.gif) no-repeat 50% 50% transparent;
  margin: -50px 0 0 -50px;
}

Usando jQuery para mostrar y desvanecer la imagen, se usan las siguientes líneas:

$(document).ready(function(){
    $(".preloader").delay(1000).fadeOut("slow").delay(1000, function(){
      $(this).remove();
    });
});

Listo, espero que te sea de ayuda. Si quieres puedes escribirme a ringhugos@gmail.com o al whatsapp para cualquier comentario o duda que tengas sobre este tutorial.

Muchas gracias por leer el blog :D

Espero que te haya sido de mucha ayuda esta entrada.
¿Te gustaría hacerme una donación?
Acá puedes hacerla con paypal fácil y seguro :)