Analytics | Diseño | Marketing de conversión

Cómo crear Spinners de carga usando animaciones CSS3

mayo 8, 2012

Dar retroalimentación a los visitantes es una parte masiva de la experiencia de usuariosi el usuario hace clic en un botón, esperaría que sucediera algo.

Un ejemplo de esto es cargar una imagen en un sitio web, puede tomar algún tiempo para que el servidor cargue la imagen, pero cuando el usuario hace clic en el botón de carga, espera que la página haga algo.

Si la página no proporciona ningún comentario de que la imagen se está cargando actualmente, el visitante podría impacientarse y hacer clic repetidamente en el botón de carga o salir de la página antes de que se complete la carga, por esta razón, siempre debe enviar comentarios a tus visitantes

Un enfoque común es utilizar un gráfico giratorio que se hace con una imagen gif o con JavaScript. Pero en este tutorial aprenderá cómo puede crear este mismo efecto usando solo animaciones CSS3.

Vamos a ver 4 imágenes de carga comunes y convertirlas en CSS3.

Los 4 cargadores que vamos a crear son:

Barras de carga – Un círculo de barras que se desvanecerá hacia adentro y hacia afuera dando la impresión de girar.
Barra giratoria – Un círculo de barras girando.
Círculo giratorio – Un círculo de círculos girando.
Cargador de Facebook – Tres barras creciendo y encogiéndose.

Barras de carga

Este se compone de 8 barras dispuestas en un círculo, todas comienzan con una opacidad diferente, el efecto giratorio proviene de cambiar la opacidad de cada barra una a la vez.

el html

El HTML para esto es muy simple ya que todo el trabajo lo realiza el CSS. Todo lo que necesita es 1 div y 8 divs dentro, que se ve así a continuación.

<div class="loading bar">
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
</div>

el css

A continuación se muestra el CSS que usamos para crear este efecto de las barras de carga.

Comenzamos creando el área principal de las barras de carga, este es un cuadro de 100 píxeles de ancho y 100 píxeles de alto.

/* ==========================================================
 * Loading Bars
 * =========================================================*/
.loading{
     width:100px;
     height:100px;
     margin:30px auto;
     position:relative;
}

La siguiente parte del CSS agregará la animación a cada barra de la ruleta, esta animación se llamará se desvanecen y correrá para siempre. los se desvanecen la animación cambiará la opacidad del elemento de completo a claro y viceversa. Cambiar los elementos con este efecto en diferentes momentos hará que parezca que las barras están girando.

.loading.bar div{
     width: 10px;
     height: 30px;
     background: black;
     position: absolute;
     top: 35px;
     left: 45px;
     opacity:0.05;
     -webkit-animation: fadeit 1.1s linear infinite;
     -moz-animation: fadeit 1.1s linear infinite;
     animation: fadeit 1.1s linear infinite;
}

Una vez que hemos asignado la animación a las barras, ahora podemos recorrer cada una de las barras y definir el ángulo de la barra y el tiempo de retraso de la animación.

Queremos cambiar el retraso de cada barra para que sea diferente para que la animación comience en diferentes momentos.

.loading.bar div:nth-child(1){
     -webkit-transform: rotate(0deg) translate(0, -30px);
     -moz-transform: rotate(0deg) translate(0, -30px);
     transform: rotate(0deg) translate(0, -30px); 

     -webkit-animation-delay:0.39s;
     -moz-animation-delay:0.39s;
     animation-delay:0.39s;
} 

.loading.bar div:nth-child(2){
     -webkit-transform: rotate(45deg) translate(0, -30px);
     -moz-transform: rotate(45deg) translate(0, -30px);
     transform: rotate(45deg) translate(0, -30px); 

     -webkit-animation-delay:0.52s;
     -moz-animation-delay:0.52s;
     animation-delay:0.52s;
} 

.loading.bar div:nth-child(3){
     -webkit-transform: rotate(90deg) translate(0, -30px);
     -moz-transform: rotate(90deg) translate(0, -30px);
     transform: rotate(90deg) translate(0, -30px); 

     -webkit-animation-delay:0.65s;
     -moz-animation-delay:0.65s;
     animation-delay:0.65s;
} 

.loading.bar div:nth-child(4){
     -webkit-transform: rotate(135deg) translate(0, -30px);
     -moz-transform: rotate(135deg) translate(0, -30px);
     transform: rotate(135deg) translate(0, -30px); 

     -webkit-animation-delay:0.78s;
     -moz-animation-delay:0.78s;
     animation-delay:0.78s;
} 

.loading.bar div:nth-child(5){
     -webkit-transform: rotate(180deg) translate(0, -30px);
     -moz-transform: rotate(180deg) translate(0, -30px);
     transform: rotate(180deg) translate(0, -30px); 

     -webkit-animation-delay:0.91s;
     -moz-animation-delay:0.91s;
     animation-delay:0.91s;
} 

.loading.bar div:nth-child(6){
     -webkit-transform: rotate(225deg) translate(0, -30px);
     -moz-transform: rotate(225deg) translate(0, -30px);
     transform: rotate(225deg) translate(0, -30px); 

     -webkit-animation-delay:1.04s;
     -moz-animation-delay:1.04s;
     animation-delay:1.04s;
} 

.loading.bar div:nth-child(7){
     -webkit-transform: rotate(270deg) translate(0, -30px);
     -moz-transform: rotate(270deg) translate(0, -30px);
     transform: rotate(270deg) translate(0, -30px); 

     -webkit-animation-delay:1.17s;
     -moz-animation-delay:1.17s;
     animation-delay:1.17s;
} 

.loading.bar div:nth-child(8){
     -webkit-transform: rotate(315deg) translate(0, -30px);
     -moz-transform: rotate(315deg) translate(0, -30px);
     transform: rotate(315deg) translate(0, -30px); 

     -webkit-animation-delay:1.3s;
     -moz-animation-delay:1.3s;
     animation-delay:1.3s;
}

A continuación se muestran los fotogramas clave de la animación. se desvanecen, aquí es donde definimos lo que queremos que haga la animación. En esta animación, comenzamos a que la opacidad del elemento esté completa y, al final de la animación, el elemento estará claro.

@-webkit-keyframes fadeit{
     0%{
          opacity:1;
     }
     100%{
          opacity:0;
     }
}
@-moz-keyframes fadeit{
     0%{
          opacity:1;
     }
     100%{
          opacity:0;
     }
}
@keyframes fadeit{
     0%{
          opacity:1;
     }
     100%{
          opacity:0;
     }
}

Barra giratoria

La siguiente ruleta que vamos a crear es muy similar a la anterior, pero en lugar de cambiar cada barra, rotaremos toda la colección de barras para que todas giren juntas.

el html

Nuevamente, el HTML es muy simple ya que el CSS hará todo. Todo lo que necesitamos es un 1 div con 8 divs dentro.

<div class="spinner bar">
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
</div>

el css

Para empezar, necesitamos definir el contenedor externo div. Esto es exactamente lo mismo que el cargador de arriba, pero vamos a agregar la animación al div del contenedor, de esta manera rotará toda la colección.

/* ==========================================================
 * Spinner
 * =========================================================*/
.spinner{
     width:100px;
     height:100px;
     margin:30px auto;
     position:relative;
     -webkit-animation: rotateit 1.3s linear infinite;
     -moz-animation: rotateit 1.3s linear infinite;
     animation: rotateit 1.3s linear infinite;
}

A continuación se muestran los fotogramas clave que vamos a usar para rotar toda la colección, los fotogramas clave comenzarán con una rotación de 360 grados y terminarán en 0 grados.

@-webkit-keyframes rotateit {
     from {
          -webkit-transform: rotate(360deg);
     }
     to {
          -webkit-transform: rotate(0deg);
     }
}
@-moz-keyframes rotateit {
     from {
          -moz-transform: rotate(360deg);
     }
     to {
          -moz-transform: rotate(0deg);
     }
}
@keyframes rotateit {
     from {
          transform: rotate(360deg);
     }
     to {
          transform: rotate(0deg);
     }
}

Ahora que hemos definido el contenedor y la animación, todo lo que tenemos que hacer ahora es colocar cada una de las barras en la rueda giratoria.

/* ================================================
 * Bars
 * ================================================*/
.spinner.bar div{
     width: 10px;
     height: 30px;
     background: black;
     position: absolute;
     top: 35px;
     left: 45px;
}
.spinner.bar div:nth-child(1){
     -webkit-transform: rotate(0deg) translate(0, -30px);
     -moz-transform: rotate(0deg) translate(0, -30px);
     transform: rotate(0deg) translate(0, -30px);
}
.spinner.bar div:nth-child(2){
     -webkit-transform: rotate(45deg) translate(0, -30px);
     -moz-transform: rotate(45deg) translate(0, -30px);
     transform: rotate(45deg) translate(0, -30px);
     opacity:0.7;
}
.spinner.bar div:nth-child(3){
     -webkit-transform: rotate(90deg) translate(0, -30px);
     -moz-transform: rotate(90deg) translate(0, -30px);
     transform: rotate(90deg) translate(0, -30px);
     opacity:0.6;
}
.spinner.bar div:nth-child(4){
     -webkit-transform: rotate(135deg) translate(0, -30px);
     -moz-transform: rotate(135deg) translate(0, -30px);
     transform: rotate(135deg) translate(0, -30px);
     opacity:0.5;
}
.spinner.bar div:nth-child(5){
     -webkit-transform: rotate(180deg) translate(0, -30px);
     -moz-transform: rotate(180deg) translate(0, -30px);
     transform: rotate(180deg) translate(0, -30px);
     opacity:0.4;
}
.spinner.bar div:nth-child(6){
     -webkit-transform: rotate(225deg) translate(0, -30px);
     -moz-transform: rotate(225deg) translate(0, -30px);
     transform: rotate(225deg) translate(0, -30px);
     opacity:0.3;
}
.spinner.bar div:nth-child(7){
     -webkit-transform: rotate(270deg) translate(0, -30px);
     -moz-transform: rotate(270deg) translate(0, -30px);
     transform: rotate(270deg) translate(0, -30px);
     opacity:0.2;
}
.spinner.bar div:nth-child(8){
     -webkit-transform: rotate(315deg) translate(0, -30px);
     -moz-transform: rotate(315deg) translate(0, -30px);
     transform: rotate(315deg) translate(0, -30px);
     opacity:0.1;
}

Círculo giratorio

El círculo giratorio tiene el mismo HTML y CSS que el círculo giratorio, la única diferencia que tenemos aquí es que agregamos un borde-radio propiedad del 50% a cada una de las barras. Eso es todo lo que se necesita para cambiar por completo el aspecto de la ruleta.

el html

<div class="spinner circles">
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
</div>

el css

/* ==========================================================
 * Spinner
 * =========================================================*/
.spinner{
     width:100px;
     height:100px;
     margin:30px auto;
     position:relative;
     -webkit-animation: rotateit 1.3s linear infinite;
     -moz-animation: rotateit 1.3s linear infinite;
     animation: rotateit 1.3s linear infinite;
}
@-webkit-keyframes rotateit {
     from {
          -webkit-transform: rotate(360deg);
     }
     to {
          -webkit-transform: rotate(0deg);
     }
}
@-moz-keyframes rotateit {
     from {
          -moz-transform: rotate(360deg);
     }
     to {
          -moz-transform: rotate(0deg);
     }
}
@keyframes rotateit {
     from {
          transform: rotate(360deg);
     }
     to {
          transform: rotate(0deg);
     }
}
/*=======================================================
 * Circles
 *======================================================*/
.spinner.circles div{
     width: 20px;
     height: 20px;
     border-radius:50%;
     background: black;
     position: absolute;
     top: 35px;
     left: 45px;
}
.spinner.circles div:nth-child(1){
     -webkit-transform: rotate(0deg) translate(0, -35px) scale(1.4);
     -moz-transform: rotate(0deg) translate(0, -35px) scale(1.4);
     transform: rotate(0deg) translate(0, -35px) scale(1.4);
}
.spinner.circles div:nth-child(2){
     -webkit-transform: rotate(45deg) translate(0, -35px) scale(1.2);
     -moz-transform: rotate(45deg) translate(0, -35px) scale(1.2);
     transform: rotate(45deg) translate(0, -35px) scale(1.2);
     opacity:0.7;
}
.spinner.circles div:nth-child(3){
     -webkit-transform: rotate(90deg) translate(0, -35px) scale(1.1);
     -moz-transform: rotate(90deg) translate(0, -35px) scale(1.1);
     transform: rotate(90deg) translate(0, -35px) scale(1.1);
     opacity:0.6;
}
.spinner.circles div:nth-child(4){
     -webkit-transform: rotate(135deg) translate(0, -35px) scale(0.9);
     -moz-transform: rotate(135deg) translate(0, -35px) scale(0.9);
     transform: rotate(135deg) translate(0, -35px) scale(0.9);
     opacity:0.5;
}
.spinner.circles div:nth-child(5){
     -webkit-transform: rotate(180deg) translate(0, -35px) scale(0.7);
     -moz-transform: rotate(180deg) translate(0, -35px) scale(0.7);
     transform: rotate(180deg) translate(0, -35px) scale(0.7);
     opacity:0.4;
}
.spinner.circles div:nth-child(6){
     -webkit-transform: rotate(225deg) translate(0, -35px) scale(0.5);
     -moz-transform: rotate(225deg) translate(0, -35px) scale(0.5);
     transform: rotate(225deg) translate(0, -35px) scale(0.5);
     opacity:0.3;
}
.spinner.circles div:nth-child(7){
     -webkit-transform: rotate(270deg) translate(0, -35px) scale(0.3);
     -moz-transform: rotate(270deg) translate(0, -35px) scale(0.3);
     transform: rotate(270deg) translate(0, -35px) scale(0.3);
     opacity:0.2;
}
.spinner.circles div:nth-child(8){
     -webkit-transform: rotate(315deg) translate(0, -35px) scale(0.1);
     -moz-transform: rotate(315deg) translate(0, -35px) scale(0.1);
     transform: rotate(315deg) translate(0, -35px) scale(0.1);
     opacity:0.1;
}

Cargador de Facebook

Si eres usuario de Facebookque estoy seguro de que la mayoría de ustedes lo son, entonces es posible que hayan notado el cargador que usan al cargar imágenes.

Esto está construido con 3 barras azules que crecerán y se encogerán de izquierda a derecha, ahora vamos a crear esto simplemente usando CSS3.

el html

Nuevamente, el HTML para esto es muy simple, todo lo que necesita es un div contenedor y 3 divs dentro.

<div class="facebook">
     <div></div>
     <div></div>
     <div></div>
</div>

el css

El CSS comienza definiendo la animación en cada una de las barras en el Facebook cargador. Debe agregar un borde y un fondo a cada una de las barras para el estilo.

los Facebook loader usa un efecto similar al del primer cargador en este tutorial, cada una de las barras hace la misma animación pero en momentos diferentes, lo que crea un efecto de onda.

Por lo tanto añadimos el Facebook cargue la animación en todas las barras, pero cambie el retraso en cada uno de los elementos.

/*===========================================================
 * Facebook Loader
 * ========================================================*/
.facebook div{
     height:50px;
     width:20px;
     display:inline-block;
     background-color: #56bbdb;
     border:1px solid #217c99;
     -webkit-animation:facebook_loader 1.3s linear infinite;
     -moz-animation:facebook_loader 1.3s linear infinite;
     animation:facebook_loader 1.3s linear infinite;
     -webkit-transform:scale(0.91);
     -moz-transform:scale(0.91);
     transform:scale(0.91);
}

Ahora que la animación está configurada, podemos cambiar el retraso en cada una de las barras.

.facebook div:nth-child(1){
     -webkit-animation-delay:0.39s;
     -moz-animation-delay:0.39s;
     animation-delay:0.39s;
}
.facebook div:nth-child(2){
     -webkit-animation-delay:0.52s;
     -moz-animation-delay:0.52s;
     animation-delay:0.52s;
}
.facebook div:nth-child(3){
     -webkit-animation-delay:0.65s;
     -moz-animation-delay:0.65s;
     animation-delay:0.65s;
}

A continuación se muestra la animación de Facebook que vamos a usar para hacer crecer las barras con opacidad total y luego, al final de la animación, se reducirá y cambiará la opacidad para aclararse. Hacer esta animación es todo lo que necesita para crear este efecto de cargador de Facebook.

@-webkit-keyframes facebook_loader{
     0%{
          -webkit-transform:scale(1.2);
          opacity:1
     }
     100%{
          -webkit-transform:scale(0.7);
          opacity:0.1
     }
}
@-moz-keyframes facebook_loader{
     0%{
          -moz-transform:scale(1.2);
          opacity:1
     }
     100%{
          -moz-transform:scale(0.7);
          opacity:0.1
     }
}
@keyframes facebook_loader{
     0%{
          transform:scale(1.2);
          opacity:1
     }
     100%{
          transform:scale(0.7);
          opacity:0.1
     }
}

Manifestación

¡Eso es todo! Estos son solo 4 efectos diferentes de cargadores que puede crear con CSS3. Si tienes otros ejemplos, compártelos.