Mostrar un gif mientras carga la página

Mostrar un gif mientras carga la página

Mostrar un gif mientras carga la página
5 (100%) 3 votos

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 unicamente por darle un poco más de estetica o profesionalismo a nuestro proyecto, hoy vamos a ver como hacerlo de la manera más fácil posible con ayuda de una linea 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 esta cargando recursos necesarios es muy útil y presenta varias ventajas:

  • Mayor profesionalismo
  • Mayor estetica
  • Evitas que se muestre una pantalla en blanco
  • Evitas que se muestre tu sitio cuando no esta 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 habiamos 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.


¿Sabías que?

¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:

WebEmpresa

Comencemos entonces!

HTML

Simplemente agrega el siguiente codigo justo despues de la etiqueta del body: <body>:

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:

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:

Este codigo debemos agregarlo justo antes de la etiqueta de cierre del body:  </body>

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

Si estas utilizando wordpress probablemente te marque error JQuery en este punto, simplemente agrega el siguiente codigo en lugar del codigo anterior:

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

Asegurate de eliminar cache en tu navegador para visualizar correctamente los ajustes.

Si tienes alguna duda o comentario no dudes en dejarmelo 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!

 

Mostrar un gif mientras carga la página
5 (100%) 3 votos

Dejar un comentario

avatar
  Subscribe  
Notify of