loader CSS

Loader CSS: Qué son y por qué los necesitas

|

loader CSS

Un loader CSS es una animación que se muestra mientras se está esperando a que termine algún proceso de la página web. Está creado a través de CSS. Estos elementos se emplean básicamente para dar una respuesta visual y que no se crea que la web ha quedado colgada.

Son más comunes de lo que piensas y se utilizan sobre todo cuando se hacen llamadas al servidor de forma asíncrona, o en otras palabras cuando empleamos AJAX.

Las llamadas asíncronas nos permiten realizar otros procesos mientras se está ejecutando otra instrucción en el hilo principal.

Un poco de historia

Existen muchos procesos e interacciones entre el cliente y el servidor en el proceso de carga de una web. Con la mejora de la tecnología y las comunicaciones, esta interacción se ha vuelto cada vez más instantánea, sin embargo, hace unos años esto no era así.

Durante la espera entre tu ordenador y el servidor de la web que estás solicitando, era imprescindible indicarle al usuario que estaba pasando algo, para que no pulsase ningún botón o recargase la página. Si no existe ningún estímulo visual, podría llegar a suponer que la web estaba colgada o se había cortado la comunicación. En este punto es cuando aparecen los loaders.

En un primer momento, los loaders se hacían íntegramente en JavaScript, java o a través de un GIF, ya que no existía otra forma de ofrecer animaciones en la web de los 90. Sin embargo, con la llegada de CSS3 esto cambió. Aunque la aparición (y en consecuencia desaparición) del loader se siga controlando por JS, el elemento hoy en día se construye a través de CSS. De aquí el nombre, loader CSS.

El uso de CSS para implementar loaders tiene muchas ventajas. Una de las más importantes, es que pesan poco. Parece una obviedad, pero en un proceso de comunicación lo que más nos interesa es que la web cargue rápidamente todos sus componentes, entre ellos los loader CSS. Normalmente que con unas pocas reglas CSS es posible realizar loaders visualmente atractivos y ligeros. En el post de hoy te pondremos un ejemplo completo de creación, pero recuerda que al igual que pasaba con la página 404 de tu web, tener un loader personalizado y adaptado a tu web le dará al usuario la sensación de que se encuentra ante una web profesional y que tienes mimado hasta el más mínimo detalle.

Por qué son necesarios los loader CSS

Puedes pensar erróneamente que tu web no necesita loaders. Más aún si está alojada en dinahosting, ya que está empleando los mejores servidores del mercado y posiblemente su código esté bastante optimizado.

Este pensamiento es muy común, pero erróneo. Habitualmente creemos que el único “culpable” de que nuestra página cargue lentamente somos nosotros. En cualquier comunicación existen siempre tres factores: el emisor, el receptor y el medio, en este caso Internet. Puedes tener la página alojada en los mejores servidores, que si la calidad de la conexión de nuestros usuarios es mala, la página necesitará de un tiempo de carga para verse completa correctamente.

Tipos de loader

Aunque no hay normas en la creación de loaders, podríamos categorizarlos en los estilos más usados en la web.

Spinner

 loaders CSS: spinner

Como su propio nombre indica, es un loader que da vueltas. Su animación principal es el giro sobre sí mismo de manera infinita. Es uno de los más sencillos de realizar, y el que te vamos a desgranar más adelante.

Text loader

 loaders CSS: Text

Para evidenciar el proceso de carga, en ocasiones nos interesa poner un mensaje de que nuestra página está esperando a que termine la comunicación. Aunque creas que con el texto es más que suficiente, es importante que siempre añadas algún elemento animado, para darle al usuario la sensación de web viva, y dinámica.

Ball loader

Ball loader

Gracias al nuestro amigo, el señor Google, se han puesto de moda el empleo de loaders en los que la animación está implementada con círculos repitiendo algún tipo de animación.

Ejemplo de loaders CSS

Vamos a enseñarte a crear un loader CSS básico, y también uno de los más utilizados: Un spinner. Solamente necesitarás un pocos de HTML y CSS. En muy pocas líneas conseguirás un efecto bastante agraciado.

Recuerda que hemos escrito un artículo sobre los principales IDE y editores de código, que te ayudarán en el proceso de escritura de código, ya que gran parte de ellos poseen la característica del autocompletado.

HTML

<div class="spinner"></div>

CSS

.spinner{
  border: 4px solid orange;
  border-left-color: transparent;
  width: 40px;
  height: 40px;
  animation: giro 1s linear infinite;
}
@keyframes giro {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
  1. Lo primero que necesitaremos será el contenedor donde introduciremos el loader. Etiquetamos la clase en la que añadiremos las reglas necesarias para conseguir nuestra animación, por ejemplo spinner.
  2. Creado el contenedor, vamos ahora con el CSS. Primero le asignamos un tamaño. En nuestro caso de 40 px de ancho y alto. Después le añadimos un borde naranja, como nuestra imagen corporativa, y por último dejamos un borde vacío. (Necesitamos una referencia para poder ver el giro)
  3. La última propiedad necesaria en la clase de nuestro loader es a animación. Incluimos la propiedad animation, con un nombre, por ejemplo, giro. Proporcionamos la duración de un segundo, en bucle infinito.
  4. Por último definimos la animación del elemento. Introducimos una posición inicial 0% y una final 100% y ¡voilá!

Nuestra recomendación es que si puedes generes tu propio loader, pero si por algún motivo, no puedes o no quieres, existen multitud de webs en la que te ofrecen repositorios de diferentes loader listos para usar.


Avatar de Edi Vieito

Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Newsletter

Recibe quincenalmente consejos muy útiles para tu web y ecommerce. Además, con tu alta te regalamos 3 guías: la Gran Guía de la Digitalización, la Guía de WordPress más completa y la Guía de Ciberseguridad para mantener tu web y pyme seguras.

Conviértete en afiliado

Gana dinero recomendando dinahosting a todo el mundo.