Animando cosas con CSS: creando loaders

En una anterior de ANIMANDO COSAS CON CSS vimos como crear algunas sencillas animaciones con un poco de CSS que inclusive podrían usarse como loaders.

En esta entrada veremos cómo crear un par de simples, sencillos y muy atractivos loaders como los siguientes:

Definiendo la estructura de los loaders con CSS

El HTML es mínimo y en donde cada span será un pequeño círculo animado:

    <div id="loader-2">
<span></span><span></span><span></span><span></span><span></span>
    </div>

Definiendo la forma de los loaders con CSS

Una vez que tenemos la estructura (HTML) aplicamos un poco de estilo para darle la forma que deseamos (en nuestro ejemplo círculos); el CSS base es el siguiente:

    span {
        display: inline-block;
        height: 15px;
        width: 15px;
        background: rgba(204, 0, 0, 0.8);
        border-radius: 500px;
    }

1. Primer loader

Recordando un poco el primer efecto que queremos lograr:

Como mencionamos anteriormente, cada círculo corresponde a un span el cual alteramos el inicio de la animación emplear la propiedad animation-delay para retrasar algunos segundos la misma:

    #loader-1 span:nth-child(1) {
        animation: scale 1s 0.1s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045);
    }
    @keyframes scale{
            0%{ transform:scale(0.0);}
            25%{ transform:scale(0.9,0.9); background:rgba(204, 0, 0, 0.8); }
            50%{ transform:scale(1,1); margin:0 3px; background:rgba(204, 0, 0, 1); }
            100%{ transform:scale(0.0);}
    }

Puedes ver el experimento completo en los siguientes enlaces:

2. Segundo loader

Para el segundo loader:

Empleamos la siguiente animación:

    #loader-2 span:nth-child(1) {
        animation: push 1s 0.1s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    }

@keyframes push{
	0%{ transform:translateX(0px) scale(0.9,0.6)background:rgba(204, 0, 0, 0.8);}
	50%{ transform:translateY(-30px) scale(0.5,1.1); background:rgba(204, 0, 0, 1);  }
	100%{ transform:translateX(0px) scale(0.9,0.6)background:rgba(204, 0, 0, 0.8);}
}

De igual manera puedes ver el experimento completo en los siguientes enlaces:

Como habrás notado, empleamos el valor cubic-bezier para personalizar el comportamiento de las animaciones; este tema ya fue tratado en la entrada anterior introducimos las curvas de y una interesante herramienta que ofrece Google Chrome para manipular estas curvas: LAS CURVAS DE BÉZIERS EN LAS ANIMACIONES CSS: CASO GOOGLE CHROME.

Consideraciones sobre el código CSS anterior

El truco aquí para lograr este efecto sin agregar una gran cantidad de CSS, es emplear la propiedad animation-delay para retrasar algunos segundos.

Los loades vistos anteriormente fueron tomados y modificados a gustos desde el siguiente enlace: Less Loaders.