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

Loader Battlenet

Loader Battlenet

Css3 Spinners

Css3 Spinners

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Algunos artículos que te pueden interesar

Creando un input radio personalizado con solo CSS

Creando un input radio personalizado con solo CSS

Se explica cómo crear un input radio personalizado con solo CSS a través de un un indicador y animaciones y transiciones en CSS.

Andrés Cruz 23-05-2016

Gradientes SVG en HTML

Gradientes SVG en HTML

En esta entrada veremos cómo definir y aplicar gradientes a cualquier SVG creado a partir de HTML; hay dos tipos de gradientes SVG que podemos emplear en nuestros diseños: lineal y radial.

Andrés Cruz 18-05-2015

¿Cómo hacer una sencilla galería con CSS y 6 líneas de JavaScript?

¿Cómo hacer una sencilla galería con CSS y 6 líneas de JavaScript?

En esta entrada explicaremos como crear una sencilla galería empleando CSS y seis (6) líneas de JavaScript.

Andrés Cruz 12-02-2015