DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
20-10-2015

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.

Los loaders son un recurso de los más vistosos y necesarios en cualquier aplicación al momento de realizar una tarea que requiera tiempo (como conectarse a un servidor y traer datos).

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.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Modelo de tarjetas con CSS

Modelo de tarjetas con CSS

Creando un pulso con CSS

Creando un pulso con CSS

Flat Module con puro CSS

Flat Module con puro CSS

Algunos artículos que te pueden interesar

Carrusel automático infinito con jQuery y CSS

Carrusel automático infinito con jQuery y CSS

En esta entrada veremos cómo crear un Carrusel automático e infinito con jQuery y un poco de CSS.

Andrés Cruz 27-06-2017

Cómo emplear la cámara y la galería con Phonegap

Cómo emplear la cámara y la galería con Phonegap

Se explica emplear la cámara de un dispositivo con PhoneGap y además cómo seleccionar una foto o imagen que tengamos en nuestro dispositivo empleando la galería con JavaScript.

Andrés Cruz 24-04-2017

Creando una sencilla barra de progreso con solo CSS

Creando una sencilla barra de progreso con solo CSS

Se explica cómo crear una sencilla barra de progreso con solo CSS.

Andrés Cruz 27-07-2016