¿Cómo insertar un sencillo cargador en tu web?

David López | 502 palabras | 3-4 min

Imagino que te habrás visto brevemente un perro dinosaurio corriendo antes de leer estas palabras. Eso fue un cargador, una imagen, formas o palabras que se muestra en bucle antes de que toda la página esté cargada.

¿Por qué usar un cargador o loader?

Recuerdo en mi época de diseño y desarrollo en Flash lo mucho que me gustaba trabajar en el cargador de la página otorgándole una estética que estuviese relacionada con la página. Cuando se dejó de usar Flash, nunca más necesité un cargador ya que, en general, todas mis páginas HTML y PHP se cargan al instante. Pero no siempre la conexión a Internet es perfecta o incluso el servidor podría ir lento al cargar las imágenes o los contenidos de la base de datos.

En tal caso es recomendable incorporar a todas nuestras páginas el código que permita mostrar la pantalla de carga antes de mostrar la web. Pero, ¿por qué es aconsejable?

Tu página parecerá más profesional.
Le comunicas al usuario que la página no está rota, simplemente tardará un poquito más en cargar.
Entretiene visualmente al usuario mientras espera.
Puedes ganarte al usuario con un cargador curioso.

El código HTML, CSS y JS del cargador

Lo bueno de este cargador es su facilidad de implementación en cualquier página de tu web. Consta de tres pasos y debes recordar que estos códigos deben estar presentes en cada una de las páginas de tu web.

1. Diseñar el GIF Animado

Antes de nada deberemos buscar o crear un gif animado que case bien con el estilo de nuestra web (en mi caso puse a la mascota Pinayu corriendo). Este .gif recomiendo que no sea mucho mayor de 250 píxeles ya que así nos aseguramos de que nunca supere el ancho de la pantalla de un teléfono móvil y sea responsive.

Se puede elegir como imagen del cargador un .jpg o un .png, pero serían imágenes estáticas y el usuario podría pensar que se quedó la web congelada o bloqueada en caso de que tardase mucho en cargar la web.

2. El código CSS

Debemos crear con código CSS el estilo de la capa que se situará por encima de todos los contenidos de la web durante la carga de la página. En el ejemplo está el color del fondo en blanco #FFFFFF, pero puedes escoger el color que desees.

.cargador {
position: fixed;
z-index: 9999;
left: 0px; top: 0px;
width: 100%; height: 100%;
background-color:#FFFFFF;
background-image:url(images/pinayu-corriendo.gif);
background-repeat:no-repeat;
background-position:50% 50%;
opacity:1;
}

Paso 3. El código Javascript

Antes del final de la etiqueta deberemos incluir, si no la tenemos ya, la librería de JQuery. Además, deberemos meter el siguiente código JS para que cuando la página esté cargada al completo, la capa del cargador se desvanezca:

$(window).load(function() {
$(".loader").fadeOut("slow");
});

Último paso: el código HTML

Para terminar el cargador deberemos escribir el código HTML de la capa del cargador. Esta se colocará justo después de la etiqueta de cada página.