Animaciones de Carga con CSS

Animaciones de Carga con CSS

Descripción:
Si buscas hacer un efecto de cargar, cual sea el fin que quieras darle, pues te comparto 5 eejmplos de estos para hacerlo e implementarlo la que mas te guste en tu web, espero les seriva.

Ejemplo de Carga Nº 01:
Vamos a empezar con algo muy sencillo como siempre. Nuestra pequeña esfera está funcionando infinitamente de izquierda a derecha en el bar. El movimiento es importante que el usuario comprenda la aplicación / página web está haciendo algo.

El código html será simple:

Pretty minimalista, pues vamos a hacer algo muy bonito y todo con css pues le agregamos los estilos css para mejorar su aspecto.

En primer lugar, vamos a crear el contenedor de la esfera: el bar. Para conservar las proporciones y hacer los preloaders escalable, he utilizado la unidad em. Simplemente cambie el valor de font-size en el envoltorio de escalar todo a su gusto.

Vamos a tratar de inmediato con el "Por favor, espere.". Usted probablemente ha notado que no aparece en el marcado: eso es porque se genera contenido. En realidad, debería estar en el margen de beneficio en un caso real en vivo, ya que su contenido es importante, no sólo cosas gráfica. Sin embargo, para la demo, pensé que podría ser suficiente para generarlo.

Así que en caso de que quiera hacer de esto un elemento real, basta con crear una vida o lo que sea, le dan esos estilos y listo. Ahora, echemos un vistazo a la esfera.

Por último, pero no menos importante, los fotogramas clave que ejecutan la animación:

Como no podía ser más fácil, ¿no? Por lo tanto el elemento esfera corre la animación se mueven en 1,75 segundos alternativamente desde el principio hasta el final y terminar para comenzar.

Nota: una manera fácil de convertir este preloader en un indicador de progreso sería eliminar el parámetro alternativo en la declaración de la animación, y establecer el tiempo de animación de acuerdo basado en el tiempo que desea que el usuario espera.

Si desea actualizar dinámicamente la posición del elemento basado en la progresión de la carga, que tendría que esta pareja con un poco de JavaScript, por supuesto.

Ejemplo de Carga Nº 02:
Ahora continuemos con algo un poco más complicado. Pero no demasiado! Una rotación

El elemento Div que usaremos para este efecto sera:

Bueno agregamos el estilo CSS para lograr nuestro efecto deseado,usted podría elegir cualquier color que te gusta. Lo mismo para el número de colores, tomé dos, pero que podía ir con cuatro. O sólo uno. O cualquier otro.

Ahora, un pseudo-elemento para el círculo blanco transparente interior.

Y porsupuesto la animación.

Ejemplo de Carga Nº 03:
Ahora vamos a profundizar en algo un poco más complicado. Pero no te preocupes, no es tan difícil. En realidad, traté de simular el comportamiento aleatorio en CSS. Larga historia corta: es imposible a menos que establezca valores totalmente extraños, y todavía no es al azar, por supuesto. De todos modos, vamos a ver más tarde.

El HTML para este no es muy bonita. Ya que no podemos animar a los pseudo-elementos, tenemos que usar varios elementos para realizar esta acción. Fui con una lista (aunque no es muy semántica) pero se puede ir con lo que quieras.

Lo primero que debe hacer es: estilo de la propia lista.

Línea blanca sutil rodeando los puntos

Y ahora, algunas explicaciones acerca de lo que viene. Cuando se carga la página, los cuatro puntos no se solapan entre sí, se colocan como puntos cardinales: norte, sur, este, oeste. Sin embargo, sus centros de rotación están todos en el mismo lugar: el centro exacto de la hiladora.

.demo-3 .spinner li:nth-child(1) {
    background: #00C176; /* Blue */
    top: 0;
    left: 50%;
    margin-left: -.1em; /* Width/2 */
    transform-origin: 50% 250%;
    animation:
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
}
 
.demo-3 .spinner li:nth-child(2) {
    background: #FF003C; /* Rojo */
    top: 50%;
    right: 0;
    margin-top: -.1em; /* alto/2 */
    transform-origin: -150% 50%;
    animation:
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
}
 
.demo-3 .spinner li:nth-child(3) {
    background: #FABE28; /* amarillo */
    bottom: 0;
    left: 50%;
    margin-left: -.1em; /* ancho/2 */
    transform-origin: 50% -150%;
    animation:
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite alternate;
}
 
.demo-3 .spinner li:nth-child(4) {
    background: #88C100; /* verde */
    top: 50%;
    left 0;
    margin-top -.1em; /* altura/2 */
    transform-origin: 250% 50%;
    animation:
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite alternate;
}

Por último, las dos animaciones. Uno es para la rotación y uno para la opacidad. Sí, la opacidad está cambiando también!

Ejemplo de Carga Nº 04:
Vamos a continuar con una demostración suave, un poco de punk tren de bits: ruedas, engranajes pues manos a la obra

Bastante pesado en este también ya que tenemos que envolver cada letra en un palmo. Y necesitamos un envoltorio para cancelar la rotación principal elemento.

El HTML sería esto:

En primer lugar, tenemos muchas cosas para aplicar al elemento principal, como el tamaño, la posición, los estilos de fuente, animación, etc

Ahora tenemos que crear las ruedas interiores con los pseudo-elementos.

Ahora la envoltura interior y las luces. Tenga en cuenta la forma en que usamos el parámetro inverso en el recipiente interior para cancelar la rotación principal del elemento.

Lamentablemente, tenemos una animación para cada letra, ya que deben ser retrasado. Al principio pensé que la animación de retardo, pero esta propiedad sólo retrasa la primera ejecución, no cada uno de ellos.

Esas animaciones pueden ser un poco difícil de entender, así que vamos a decirlo simple.
Cada letra tiene que:

Pierde un poco de opacidad
Volver a la opacidad completa
Espere hasta que todas las demás letras ha hecho lo mismo
Vuelva al paso 1 y repita

¿Cómo hacemos eso exactamente?

Se cuenta el número de cartas en tu elemento. Nuestra demo cuenta con 7.
Se divide 100 (el número de fotogramas clave, expresado en%) por este número. En este ejemplo, es igual a 14,28 keyframes
Cada 14,28 fotogramas clave, una carta sigue su cosa.
Listo.

Ejemplo de Carga Nº 05:
Vamos a terminar con algo un poco más conceptual. Sé que la gente no le va a gustar mucho, pero dependiendo de su sitio web / aplicación, se podría considerar esto como una inspiración =D.

A pesar de lo que parece, sólo tenemos un solo elemento para lograrlo y es:

En realidad, nuestro elemento es sólo una de nuestras pequeñas esferas (el que está en la parte superior). Los otros siete son de cajones-sombras.

El efecto cuadrada transparente se hace con un ... bueno, un cuadrado transparente. Es un pseudo-elemento girado poner encima de todo lo demás. Bastante fácil.

Y ahora las animaciones. Algunas explicaciones sobre el segundo (parpadeo):

Tenemos 8 balas, así que dividimos 100 fotogramas clave en 8: 12.5.
Cada 12,5 fotogramas clave, una bala pierde un poco de opacidad. rgb (18,52,86) es el código RGB para # 123456.
En el primer cuadro (12,5%), que es el propio elemento que disminuye la opacidad.

@keyframes counter-clock {
    to { transform: rotate(-360deg); }
}
 
@keyframes blink {
    12.5% {
    background: rgba(18,52,86,0.6);
    box-shadow:
       1em 1em #123456,
       2em 2em #123456,
       1em 3em #123456,
       0em 4em #123456,
      -1em 3em #123456,
      -2em 2em #123456,
      -1em 1em #123456;
    }
 
    25% {
    background: #123456;
    box-shadow:
       1em 1em rgba(18,52,86,0.6),
       2em 2em #123456,
       1em 3em #123456,
       0em 4em #123456,
      -1em 3em #123456,
      -2em 2em #123456,
      -1em 1em #123456;
    }
 
    37.5% {
    background: #123456;
    box-shadow:
       1em 1em #123456,
       2em 2em rgba(18,52,86,0.6),
       1em 3em #123456,
       0em 4em #123456,
      -1em 3em #123456,
      -2em 2em #123456,
      -1em 1em #123456;
    }
 
    50% {
    background: #123456;
    box-shadow:
      1em 1em #123456,
      2em 2em #123456,
      1em 3em rgba(18,52,86,0.6),
      0em 4em #123456,
      -1em 3em #123456,
      -2em 2em #123456,
      -1em 1em #123456;
    }
 
    62.5% {
    background: #123456;
    box-shadow:
       1em 1em #123456,
       2em 2em #123456,
       1em 3em #123456,
       0em 4em rgba(18,52,86,0.6),
      -1em 3em #123456,
      -2em 2em #123456,
      -1em 1em #123456;
    }
 
    75% {
    background: #123456;
      box-shadow:
       1em 1em #123456,
       2em 2em #123456,
       1em 3em #123456,
       0em 4em #123456,
      -1em 3em rgba(18,52,86,0.6),
      -2em 2em #123456,
      -1em 1em #123456;
    }
 
    87.5% {
    background: #123456;
    box-shadow:
       1em 1em #123456,
       2em 2em #123456,
       1em 3em #123456,
       0em 4em #123456,
      -1em 3em #123456,
      -2em 2em rgba(18,52,86,0.6),
      -1em 1em #123456;
    }
   
    100% {
    background: #123456;
    box-shadow:
       1em 1em #123456,
       2em 2em #123456,
       1em 3em #123456,
       0em 4em #123456,
      -1em 3em #123456,
      -2em 2em #123456,
      -1em 1em rgba(18,52,86,0.6);
    }
}

Y al fin terminamos, claro que se puede facilitar el proceso con algunas herramientas externas pero eso quizá lo veamos mas adelante.

BUSCADOR

CATEGORÍAS

Aprende a como descargar

14 junio 2013

Animaciones de Carga con CSS

1 comentario:

Post Top Ad

CATEGORÍAS DESTACADAS

SÍGUENOS EN FACEBOOK

TELEGRAM

RECIBE NUESTROS POST

ENTRADAS POPULARES