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

Ondas con SVG y CSS

Ondas con SVG y CSS

3D Box Control conTweenMax

3D Box Control conTweenMax

Ley del cuadrado inverso con CSS

Ley del cuadrado inverso con CSS

Algunos artículos que te pueden interesar

Entendiendo los posicionamientos en CSS

Entendiendo los posicionamientos en CSS

En esta entrada explicaremos cada uno de los tipos de posicionamiento que actualmente existen en el CSS y daremos algunos ejemplos prácticos de los mismo para entenderlos adecuadamente.

Andrés Cruz 12-03-2015

La pseudo-class :target en CSS

La pseudo-class :target en CSS

Este selector o pseudo-class es empleado para seleccionar o dar estilo a un único elemento cuyo id coincida en alguno de los elementos HTML.

Andrés Cruz 23-02-2015

El uso de la función step en las animaciones y transiciones en CSS

El uso de la función step en las animaciones y transiciones en CSS

La función steps() permite controlar el movimiento de las animaciones indicando el número de "frame" o saltos que queremos que conste una animación o transición.

Andrés Cruz 16-03-2015