Muchas veces en nuestros proyectos web es necesario mostrar un GIF mientras carga la página debido a que tal vez incluye muchas imágenes o únicamente por darle un poco más de estética o profesionalismo a nuestro proyecto, hoy vamos a ver como hacerlo de la manera más fácil posible con ayuda de una línea HTML, un poco de estilo CSS y por supuesto jQuery para algo de funcionalidad.

Mostrar un icono o animación de carga en lo que tu web está cargando recursos necesarios es muy útil y presenta varias ventajas:

Mayor profesionalismo
Mayor estética
Evitas que se muestre una pantalla en blanco
Evitas que se muestre tu sitio cuando no está totalmente listo
Tus visitantes obtienen la impresión de que tu sitio va más rápido.

Como lo mencionamos arriba, este proyecto lo desarrollaremos con HTML, CSS y jQuery, antes ya habíamos visto como colocar un video de fondo también con html y css.

Puedes ver como va este ejemplo en este mismo blog al cambiar de página o navegar un poco por el sitio.

¡Comencemos entonces!

HTML

Simplemente agrega el siguiente código justo después de la etiqueta del body: <body>:

<div class="jm-loadingpage"></div>

Si estas en WordPress seguro lo encontrarás en tu header.php.

CSS

Ahora agregaremos unas pocas lineas de estilo para nuestra pantalla de cargando:

/*Loading page*/
.jm-loadingpage {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 999999999;
	background: url(images/loadingpage.gif) center no-repeat #fff;
}
/*Loading page*/

Simplemente indicamos que abarque toda la pantalla y que sobresalga a cualquier elemento del sitio.

En este codigo establecemos la ruta a un gif animado que será lo único visible en nuestra pantalla de cargando, asegurate de subirlo a tu servidor y enlazarlo correctamente.

JQUERY

Por último vamos a indicar cuando debe de desaparecer, esto es cuando ya este cargado el documento, para esto vamos a hacer uso de JQUERY:

<script>
$(document).ready(function() {
	$(".jm-loadingpage").fadeOut("slow");;
});
</script>

Este código debemos agregarlo justo antes de la etiqueta de cierre del body: </body>

Con esto indicamos que si ha terminado de cargar el documento nuestro elemento simplemente se desaparezca.

Si estás utilizando WordPress probablemente te marque error jQuery en este punto, simplemente agrega el siguiente código en lugar del código anterior:

<script>
$(document).ready(function() {
	$(".jm-loadingpage").fadeOut("slow");;
});
</script>

¡Listo! ¡Tendremos nuestra animación de cargando correctamente incluida en nuestro proyecto web!

Asegúrate de eliminar caché en tu navegador para visualizar correctamente los ajustes.

Si tienes alguna duda o comentario no dudes en dejármelo en los comentarios, será un gusto poder ayudarte si me es posible.

No olvides tampoco compartirlo en tus redes sociales para apoyar el blog.

¡Hasta luego!

Clic para valorar esta información

[Total: 2 Promedio: 5]

Mostrar un gif mientras carga la página

HTML

CSS

JQUERY

jonathan__melgoza