Creando una colección de animaciones de carga en CSS3

() translation by (you can also view the original English article)

La pre-carga es una señal común en el diseño web moderno. Como usuarios esperamos que la web sea rápida y fluida - no nos gusta esperar por las cosas. La pre-carga ofrece información visual en caso de que el contenido aún esté cargando, de esta manera manejamos las expectativas y reducimos la posibilidad de que el usuario abandone el sitio.

Fundamentos de CSS3 para la Creación de Pre-cargadores

Antes de sumergirnos en la creación de nuestra colección de pre-cargadores, primero hablaré sobre algunos atributos de CSS3 que son esenciales para la creación de estos tipos de pre-cargadores.

Pseudo Elementos `:before` `:after`

Los pseudo elementos son realmente útiles en la ayuda para la creación de pre-cargadores. Los pseudo elementos crean esencialmente un elemento falso antes y después del elemento HTML en cuestión.

“Pseudo se deriva del griego pseudēs que significa falso.”

Esto es similar a la creción de un elemento extra que en realidad no existe pero que pueden ser estilizados usando CSS. Estos pseudo elementos no son necesarios para la creación de pre-cargadores en CSS3 pero nos permiten ser muy prácticos y usar el mínimo de elementos.

Los pseudo elementos pueden ser estilizados de la misma manera que lo harías con cualquier otro elemento HTML, la única diferencia es que usted debe especificar una propiedad del contenido. Si no se especifica esto el pseudo elemento no se utilizará. La propiedad del contenido puede contener cualquier texto que pueda ser de utilidad si su pre-cargador debe contener palabras como “Cargando...” Sin embargo, si no necesita texto de contenido entonces puede dejar en blanco la propiedad.

Animación CSS3

Los pseudo elementos CSS son útiles pero no esenciales para la creación de pre-cargadores CSS3, pero la propiedad de animación lo es. Sin esta propiedad el pre-cargador fallará para animar y solo será una representación estática - nada útil para indicar que el contenido está cargando.

“El componente principal de las animaciones con CSS son los @keyframes, la regla CSS donde se crea la animación. Pensar en @keyframes como etapas a lo largo de una linea de tiempo. Dentro de @keyframes, puede definir esas etapas, cada una con una declaración de estilo diferente.” - Introducción sobre animaciones CSS para principiante

Nota: antes de saltar a la demo valdría la pena señalar que los prefijos para cada navegador no están incluidos en los fragmentos de código. Si necesita los prefijos entonces vea los ejemplos en codepen.

1. Ondas de Audio

La idea detrás de este pre-cargador es crear una animación similar a las ondas de audio.

HTML

Esto se consigue mediante la creación de cinco etiquetas span, cada uno representando una barra de audio.

<div id="preloader_1">
          <span></span>
  			<span></span>
  			<span></span>
  			<span></span>
  			<span></span>
  		</div>

CSS

El efecto se consigue animando la altura de cada elemento de 5px a 30px. La etiqueta también se mueve hacia abajo en el eje Y por 15px para dar el efecto que esta creciendo desde el centro.

#preloader_1{
    position:relative;
}
#preloader_1 span{
	display:block;
	bottom:0px;
	width: 9px;
	height: 5px;
	background:#9b59b6;
	position:absolute;
    animation: preloader_1 1.5s	 infinite ease-in-out;
}

#preloader_1 span:nth-child(2){
left:11px;
animation-delay: .2s;

}
#preloader_1 span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
left:44px;
animation-delay: .8s;
}
@keyframes preloader_1 {
    0% {height:5px;transform:translateY(0px);background:#9b59b6;}
    25% {height:30px;transform:translateY(15px);background:#3498db;}
    50% {height:5px;transform:translateY(0px);background:#9b59b6;}
    100% {height:5px;transform:translateY(0px);background:#9b59b6;}
}

Por defecto la animación de cada etiqueta sucede al mismo tiempo. El effecto de la onda Mexicana es creado agregando la propiedad animation-delay a cada etiqueta con un desplazamiento de 2 milisegundos. Cada etiqueta es seleccionada usando el selector nth-child().

2. Cuadro Circular

Este pre-cargador usa cuatro cuadrados que se desplazan, giran, cambian de color y se convierten en círculos.

HTML

Es creado mediante cuatro etiquetas span. Cada una es un círculo/cuadrado y tiene su propia animación aplicada al mismo.

<div id="preloader_2">
    		<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>

CSS

Todas las cuatro se transforman de un cuadrado a un círculo ajustando la propiedad border-radius de 0px (cuadrado) a 20px (círculo).

#preloader_2{
position: relative;
left: 50%;
width: 40px;
height: 40px;
}
#preloader_2 span{
    display:block;
	bottom:0px;
	width: 20px;
	height: 20px;
	background:#9b59b6;
	position:absolute;
}
#preloader_2 span:nth-child(1){
animation: preloader_2_1 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(2){
left:20px;
animation: preloader_2_2 1.5s infinite ease-in-out;

}
#preloader_2 span:nth-child(3){
top:0px;
animation: preloader_2_3 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(4){
top:0px;
left:20px;
animation: preloader_2_4 1.5s infinite ease-in-out;
}

@-keyframes preloader_2_1 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    50% {-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
    80% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
     100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-keyframes preloader_2_2 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    50% {-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
    80% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-keyframes preloader_2_3 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    50% {-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
    80% {-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
     100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}


@-keyframes preloader_2_4 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    50% {-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
    80% {-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
     100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}

Cada uno también gira y se mueve a lo largo de los ejes X & Y en dirección opuesta a la posición actual. El color de cada etiqueta es animada desde un púrpura uniforme a su propio color independiente. Esto da la impresión de que las formas se fusionan en varios círculos desde un cuadrado.

3. Cruzando Figuras

El pre-cargador es un div que utiliza los pseudo elementos :before y :after de los que hablamos previamente.

HTML

1	<div id="preloader_3"></div>

CSS

#preloader_3{
    position:relative;
}
#preloader_3:before{
	width:20px;
	height:20px;
	border-radius:20px;
	background:blue;
	content:'';
	position:absolute;
	background:#9b59b6;
	animation: preloader_3_before 1.5s infinite ease-in-out;
}

#preloader_3:after{
	width:20px;
	height:20px;
	border-radius:20px;
	background:blue;
	content:'';
	position:absolute;
	background:#2ecc71;
	left:22px;
	animation: preloader_3_after 1.5s infinite ease-in-out;
}

@keyframes preloader_3_before {
    0% {transform: translateX(0px) rotate(0deg)}
    50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
      100% {transform: translateX(0px) rotate(0deg)}
}
@keyframes preloader_3_after {
    0% {transform: translateX(0px)}
    50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
  	100% {transform: translateX(0px)}
}

Una animación es colocada en #preloader_3:before y otra en #preloader_3:after. Cada animación cambia a un color diferente en el momento opuesto. Muy parecido al anterior pre-cargador, donde cada pseudo elemento cambia de un círculo a un cuadrado animando la propiedad border-radius .

4. La serpiente

La serpiente es creada de una colección de etiquetas span donde cada una es estilizada para formar un círculo.

HTML

Esta es la estructura, pero siempre se puede tratar de crear el pre-cargador con tres círculos y en lugar de tener demasiadas etiquetas span solo usar el div #preloader_4 con los pesudo elementos :before y :after.

<div id="preloader_4">
    		<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>

CSS

La animación es creada mediante la transformación de la posición Y de cada animación por -10px y cambiando de color azul a amarillo. Para crear el efecto de sombra debajo de la serpiente se añade que cada etiqueta span cambie el tamaño de su sombra vertical de 0px a 20px.

#preloader_4{
    position:relative;
}
#preloader_4 span{
	position:absolute;
	width:20px;
	height:20px;
	background:#3498db;
	opacity:0.5;
border-radius:20px;
	-animation: preloader_4 1s infinite ease-in-out;

}
#preloader_4 span:nth-child(2){
	left:20px;
	animation-delay: .2s;
}
#preloader_4 span:nth-child(3){
	left:40px;
	animation-delay: .4s;
}
#preloader_4 span:nth-child(4){
	left:60px;
	animation-delay: .6s;
}
#preloader_4 span:nth-child(5){
	left:80px;
	animation-delay: .8s;
}
@keyframes preloader_4 {
    0% {opacity: 0.3; transform:translateY(0px);    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    50% {opacity: 1; transform: translateY(-10px); background:#f1c40f;	box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
  	100%  {opacity: 0.3; transform:translateY(0px);	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}

Parecido al pre-cargador 1, agregamos la propiedad animation-delay a cada etiqueta span y compensamos el retraso de cada etiqueta span con 2 milisegundos y creamos el efecto de onda.

5. Disco Giratorio

Esto es... una cosa giratoria.

HTML

Aquí simplemente estamos usando un div para el círculo central y el pseudo elemento :after para crear las líneas exteriores.

1	<div id="preloader5"></div>

CSS

Añadiendo el borde a la parte superior e inferior mediando la propiedad border-radius con 50px crea las dos líneas exteriores. La animación es agregada al div principal solo para cambiar el color principal del div y crear el efecto giratorio agregando la propiedad transform: rotate() . La animación del pseudo elemento :after es agregada para cambiar de color el borde exterior.

#preloader5{
    position:relative;
	width:30px;
	height:30px;
	background:#3498db;
	border-radius:50px;
	animation: preloader_5 1.5s infinite linear;
}
#preloader5:after{
	position:absolute;
	width:50px;
	height:50px;
	border-top:10px solid #9b59b6;
	border-bottom:10px solid #9b59b6;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-radius:50px;
	content:'';
	top:-20px;
	left:-20px;
	animation: preloader_5_after 1.5s infinite linear;
}
@keyframes preloader_5 {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(180deg);background:#2ecc71;}
    100% {transform: rotate(360deg);}
}
@keyframes preloader_5_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}

6. Ventana Reluciente

Tenemos algo parecido a Microsoft en esto...

HTML

Este pre-cargador es creado usando un div y cuatro etiquetas span para crear cada cuadrado.

 <div id="preloader6">
    		<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>

CSS

Estos cuadrados se colocan en un orden de rejilla. La animación es agregada al div principal para hacer girar todo el pre-cargador.Otra animación es agregada a las etiquetas span que las escala de 100% a 50%. Después agregamos la propiedad animation-delay a cada etiqueta span para crear el efecto de pulsación.

#preloader6{
    position:relative;
	width: 42px;
	height: 42px;
	animation: preloader_6 5s infinite linear;
}
#preloader6 span{
	width:20px;
	height:20px;
	position:absolute;
	background:red;
	display:block;
	animation: preloader_6_span 1s infinite linear;
}
#preloader6 span:nth-child(1){
background:#2ecc71;

}
#preloader6 span:nth-child(2){
left:22px;
background:#9b59b6;
	animation-delay: .2s;

}
#preloader6 span:nth-child(3){
top:22px;
background:#3498db;
	animation-delay: .4s;
}
#preloader6 span:nth-child(4){
top:22px;
left:22px;
background:#f1c40f;
	animation-delay: .6s;
}
@keyframes preloader_6_span {
   0% { transform:scale(1); }
   50% { transform:scale(0.5); }
   100% { transform:scale(1); }
}

Conclusión

La gran ventana al usar pre-cargadores CSS3 en lugar de imágenes pre-cargadoras es que ellos son escalables y están listos para la pantalla retina. Eso significa que no importa desde que dispositivo se muestran siempre estarán nítidos, limpios y a prueba, (ten en cuenta que no todos los navegadores antiguos soportan animaciones CSS3).

Mediante la comprensión de algunas propiedades y técnicas CSS3 deberías ser capaz de crear tus propios pre-cargadores. Son divertidos para crear y con un poco de experimentación puedes hacer animaciones realmente geniales para evitar que los usuarios abandonen tu sitio.

Si has creado algún pre-cargador recientemente me encantaría verlo. Siéntase libre de dejarlo en los comentarios.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Creando una colección de animaciones de carga en CSS3

Fundamentos de CSS3 para la Creación de Pre-cargadores

Pseudo Elementos :before :after

Animación CSS3

1. Ondas de Audio

HTML

CSS

2. Cuadro Circular

HTML

CSS

3. Cruzando Figuras

HTML

CSS

4. La serpiente

HTML

CSS

5. Disco Giratorio

HTML

CSS

6. Ventana Reluciente

HTML

CSS

Conclusión

Pseudo Elementos `:before` `:after`