Me siento muy cómodo en el día a día del trabajo con CSS, pero muchas veces encuentro auténticas virguerías publicadas en Internet por otros desarrolladores y me quedo absolutamente admirado. Ellos sí tienen nivel. Es el caso de los loader con CSS. Tengo que reconocer que si buscas en la web encontrarás animaciones espectaculares para ofrecer al usuario un feedback mientras se recibe la respuesta del servidor ante una solicitud Ajax.

Dicho eso, sí creo que soy capaz de explicar las bases que podrías usar para crear tu propia animación CSS, así como personalizar su funcionamiento, así que me he puesto a escribir este artículo, usando una animación que implementaré en un Web Component que publicaremos en el Manual de Lit. Será una animación sencilla pero bastante resultona, no solo por dejar las cosas suficientemente sencillas, sino también porque me falta paciencia para ir medir espacios, tamaños de los elementos y tiempos, así como para proyectar el ciclo de la animación.

Marcado para la animación

Lo primero que tenemos que definir a la hora de hacer una animación es qué elementos HTML van a participar. Si tenemos la típica rueda girando quizás con un único elemento consigamos un buen resultado, pero a veces las animaciones constan como de varios elementos que van "bailando" de manera sincronizada, pero independiente.

Por ello, depende de nuestra animación objetivo necesitaremos un marcado. Éste consistirá en un elemento padre, con varios elementos hijos. El elemento padre será el bloque completo y los hijos serán los elementos que se moverán o cambiarán de tamaño para conseguir esa animación.

Por ejemplo vamos a construir una animación con tres barras verticales que crecen y decrecen de tamaño, por lo que vamos a usar un marcado con un padre y tres elementos hijos.

<div class="loader">
    <div></div>
    <div></div>
    <div></div>
</div>

Como puedes apreciar, la etiqueta principal tiene una clase CSS que es la que hace que se convierta en el loader.

Insisto, si nuestra animación consta de más barras o más bolas que se mueven, entonces necesitaríamos simplemente añadir más hijos en el contenedor padre.

CSS para el loader

Vamos a hacer la parte importante de este ejercicio, que es aplicar los estilos CSS a los elementos y por supuesto para la animación. Comenzaremos viendo el CSS para la parte del contenedor:

.loader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 60px;
    height: 50px;
}

Hemos definido unas dimensiones, pero sobre todo donde nos hemos apoyado es la especificación de Flexbox para conseguir que los elementos se posicionen en el espacio reservado para ellos.

Con justify-content: space-between conseguimos que, dado el espacio disponible en la anchura, los elementos hijos se distribuyan de modo que quede un espacio proporcional entre ellos.

Ahora vamos a ver cómo serían los estilos para los hijos.

.loader div {
    width: 12px;
    background: #888;
    animation: loader 1.8s linear infinite;
}

Simplemente les damos una anchura y color de fondo. Aquí es donde podrías personalizar tu animación, haciendo que las barras sean más finas o más anchas, así como el color que se ajuste a tu sitio web.

Además, se especifica la animación que vamos a realizar, con la propiedad "animation". La animación se llama "loader" y durará 1,8 segundos, siendo su progresión de manera linear.

Animación CSS

Ahora viene la parte en la que realizaremos la animación propiamente dicha. Para especificarla tenemos que indicar una serie de etapas "keyframes" de la animación. Cuantas más etapas, más compleja será la animación.

Para nuestro ejemplo, los fotogramas clave o keyframes de la animación quedarían así:

@keyframes loader {
    0% {
        height: 12px;
    }
    25% {
        height: 50px;
    }
    50% {
        height: 10px;
    }
    75% {
        height: 25px;
    }
    100% {
        height: 12px;
    }
}

Tal como hemos dejado la animación afectará a todos los elementos por igual, pero podríamos establecer un retardo en la animación para alguno de los elementos, en este caso lo haremos con el central, para que no se mueva a la vez que los otros.

Esto lo conseguiremos con la propiedad animation-delay, aplicando el estilo al segundo elemento hijo del loader.

.loader div:nth-child(2) {
    animation-delay: -0.25s;
}

Con este pequeño detalle la animación cambia bastante, como podrás comprobar si juegas un poco con el código CSS.

Código completo de la animación CSS

Para ver el resultado completo de esta animación voy a compartir este código de una página HTML donde hemos puesto en marcha el loader.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loader con CSS</title>
    <style>
        .loader {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 60px;
            height: 50px;
        }

        .loader div {
            width: 12px;
            background: #888;
            animation: loader 1.8s linear infinite;
        }

        .loader div:nth-child(2) {
            animation-delay: -0.25s;
        }


        @keyframes loader {
            0% {
                height: 12px;
            }

            25% {
                height: 50px;
            }

            50% {
                height: 10px;
            }

            75% {
                height: 25px;
            }

            100% {
                height: 12px;
            }
        }
    </style>
</head>

<body>
    <h1>Animación CSS para implementar un Loader</h1>
    <div class="loader">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>

Espero que te haya gustado y puedas usar de base este conocimiento para crear tus propias animaciones CSS, o usar esta misma animación directamente en un proyecto web. Con un poco de tiempo estoy seguro además que podrás cambiar el código, los parámetros de la animación, su forma o colores, para ajustarla a tus necesidades.