Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS3
Webdesign

Creando una colección de animaciones de carga en CSS3

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Yair Rodriguez (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.

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.

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.

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).

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

CSS

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.

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.

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.

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.

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.

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.

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!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.