Share
Los precargadores son una vista 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. Los precargadores ofrecen comentarios visuales en caso de que se cargue contenido, lo que permite gestionar las expectativas y reducir las posibilidades de que un usuario abandone su sitio web..
Antes de adentrarnos en la creación de nuestra colección de precargadores CSS3, primero hablaré sobre algunos de los atributos de CSS3 que son esenciales para crear este tipo de precargadores..
Accentsconagua
:antes de :despuésLos pseudo elementos son De Verdad Útil para ayudar a crear precargadores CSS3. Los pseudo elementos esencialmente crean un elemento falso antes o después del elemento HTML en cuestión.
"Pseudo se deriva de la palabra griega pseudēs que significa falso ".
Esto es similar a crear un elemento adicional que no existe realmente, sin embargo, los pseudo elementos pueden ser estilizados usando CSS. Estos pseudo elementos no son una necesidad para crear precargadores CSS3, pero son útiles y nos permiten utilizar un mínimo de marcado..
Los pseudo elementos pueden ser estilizados exactamente de la misma manera que lo haría con cualquier otro elemento HTML, la única diferencia es que debe especificar un contenido propiedad. Sin especificar esto, el pseudo elemento no se procesará. La propiedad de contenido puede contener cualquier texto que pueda ser útil si su precargador necesita contener palabras como "Cargando ..." sin embargo, si no necesita ningún contenido de texto, puede dejar la propiedad del contenido en blanco.
Los pseudo elementos CSS son útiles pero no esencial para crear precargadores CSS3, pero la propiedad de animación es. Sin esto, el precargador no se animaría y solo sería una imagen estática, no muy útil para indicar que el contenido se está cargando..
“El componente principal de las animaciones CSS es @keyframes, la regla CSS donde se crea la animación. Piense en @keyframes como etapas a lo largo de una línea de tiempo. Dentro de @ fotogramas clave, puede definir estas etapas, cada una con una declaración de estilo diferente. "- Una introducción para principiantes a la animación CSS
Nota: antes de saltar a la demostración, vale la pena señalar que los prefijos de los proveedores no están incluidos en los fragmentos de código a continuación. Si necesita los prefijos del proveedor, consulte los ejemplos de codepen.
La idea detrás de este precargador es crear una animación similar a una onda de audio..
Esto se logra creando cinco tramos, cada uno representando una barra de audio.
El efecto se logra al animar la altura de cada rango desde 5px hasta 30px. El intervalo también se mueve hacia abajo en el eje Y en 15px para dar el efecto de que está creciendo desde el centro.
# preloader_1 posición: relativo; # preloader_1 span display: block; abajo: 0px; ancho: 9px; altura: 5px; fondo: # 9b59b6; posición: absoluta; animación: preloader_1 1.5s infinita facilidad de entrada-salida; # preloader_1 span: nth-child (2) left: 11px; animación-retraso: .2s; # preloader_1 span: nth-child (3) left: 22px; animación-retraso: .4s; # preloader_1 span: nth-child (4) left: 33px; animación-retraso: .6s; # preloader_1 span: nth-child (5) left: 44px; animación-retraso: .8s; @keyframes preloader_1 0% altura: 5px; transformar: translateY (0px); fondo: # 9b59b6; 25% altura: 30px; transformar: translateY (15px); fondo: # 3498db; 50% altura: 5px; transform: translateY (0px); fondo: # 9b59b6; 100% altura: 5px; transform: translateY (0px); background: # 9b59b6;
Por defecto, la animación en cada tramo ocurre al mismo tiempo. los ola mexicana efecto se crea mediante la adición de animación-retraso a cada tramo con un desplazamiento de 2 milisegundos. Cada tramo se dirige utilizando el nth-child () selector.
Este precargador utiliza cuatro cuadrados que se desplazan, rotan, cambian de color y se convierten en círculos..
Se crea utilizando cuatro vanos. Cada uno es un círculo / cuadrado y tiene su propia animación aplicada..
Los cuatro se transforman de un cuadrado en un círculo ajustando el radio del borde de 0px (cuadrado) a 20px (círculo).
# preloader_2 posición: relativa; izquierda: 50%; ancho: 40px; altura: 40px; # preloader_2 span display: block; abajo: 0px; ancho: 20px; altura: 20px; fondo: # 9b59b6; posición: absoluta; # preloader_2 span: nth-child (1) animación: preloader_2_1 1.5s infinita facilidad de entrada-salida; # preloader_2 span: nth-child (2) left: 20px; animación: preloader_2_2 1.5s infinita facilidad de entrada-salida; # preloader_2 span: nth-child (3) top: 0px; animación: preloader_2_3 1.5s infinita facilidad de entrada y salida; # preloader_2 span: nth-child (4) top: 0px; izquierda: 20px; animación: preloader_2_4 1.5s infinita facilidad de entrada y salida; @ -keyframes preloader_2_1 0% -transform: translateX (0px) translateY (0px) rotate (0deg); radio del borde: 0px; 50% -transform: translateX (-20px) translateY (-10px) rotate (-180deg); radio del borde: 20 px; fondo: # 3498db; 80% -transform: translateX (0px) translateY (0px) rotate (-360deg); radio del borde: 0px; 100% -transform: translateX (0px) translateY (0px) rotate (-360deg); radio del borde: 0px; @ -keyframes preloader_2_2 0% -transform: translateX (0px) translateY (0px) rotate (0deg); border-radius: 0px; 50% -transform: translateX (20px) translatey (-10px) rotate (180deg); radio del borde: 20px; fondo: # f1c40f; 80% -transform: translateX (0px) translateY (0px) rotate (360deg); border-radius: 0px; 100% -transformar: translateX (0px) translateY (0px) rotate (360deg); border-radius: 0px; @ -keyframes preloader_2_3 0% -transform: translateX (0px) translateY (0px) rotate (0deg); border- radio: 0px; 50% -transformar: translateX (-20px) translateY (10px) rotate (-180deg); radio del borde: 20px; fondo: # 2ecc71; 80% -transform: translateX (0px) translateY (0px) rotate (-360deg); border-radius: 0px; 100% -transform: translateX (0px) translateY (0px) rotar (-360deg); radio del borde: 0px; @ -keyframes preloader_2_4 0% -transform: translateX (0px) translateY (0px) rotate (0deg); radio del borde: 0px; 50% -transform: translateX (20px) translateY (10px) rotate (180deg); radio del borde: 20 px; fondo: # e74c3c; 80% -transform: translateX (0px) translateY (0px) rotate (360deg); radio del borde: 0px; 100% -transform: translateX (0px) translateY (0px) rotate (360deg); border-radius: 0px;
Cada uno también gira y se mueve a lo largo del eje X e Y en dirección opuesta a su posición actual. El color de cada vano también se anima desde un color púrpura uniforme hasta su propio color independiente. Esto da la impresión de que las formas se fusionan de varios círculos en un cuadrado.
El pre-cargador de Crossing Shapes es un div único que utiliza el :antes de y :después Pseudo elementos de los que hablamos anteriormente..
# preloader_3 posición: relativa; # preloader_3: antes de width: 20px; altura: 20px; radio del borde: 20px; fondo: azul; content: "; position: absolute; background: # 9b59b6; animation: preloader_3_before 1.5s infinite eas-in-out; # preloader_3: after width: 20px; height: 20px; border-radius: 20px; background: blue; content : "; posición: absoluta; fondo: # 2ecc71; izquierda: 22px; animación: preloader_3_after 1.5s infinite eas-in-out; @keyframes preloader_3_before 0% transform: translateX (0px) rotate (0deg) 50% transform: translateX (50px) scale (1.2) rotate (260deg); fondo: # 2ecc71; radio-borde: 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 se coloca en # preloader_3: antes y otro en # preloader_3: después. Cada animación cambia a un color diferente en el tiempo opuesto. De forma similar al precargador anterior, cada pseudo elemento cambia de un círculo a un cuadrado animando el radio del borde propiedad.
La serpiente está formada por una colección de vanos, cada uno de los cuales está diseñado para formar un círculo..
Aquí está el marcado, pero siempre puedes intentar crear el precargador de serpientes con tres círculos y en lugar de tener varios tramos, solo usa # preloader_4 div con :antes de y :después.
La animación se crea al transformar la posición Y de cada animación en -10px y cambiando de color de azul a amarillo. Para crear el efecto de sombra subyacente, se agrega una sombra paralela a cada tramo que cambia su tamaño de sombra vertical de 0px a 20px.
# preloader_4 posición: relativa; # preloader_4 span position: absolute; ancho: 20px; altura: 20px; fondo: # 3498db; opacidad: 0.5; radio del borde: 20px; -animación: preloader_4 1s infinita facilidad de entrada-salida; # preloader_4 span: nth-child (2) left: 20px; animación-retraso: .2s; # preloader_4 span: nth-child (3) left: 40px; animación-retraso: .4s; # preloader_4 span: nth-child (4) left: 60px; animación-retraso: .6s; # preloader_4 span: nth-child (5) left: 80px; animación-retraso: .8s; @keyframes preloader_4 0% opacidad: 0.3; transformar: traducirY (0px); caja-sombra: 0px 0px 3px rgba (0, 0, 0, 0.1); 50% opacidad: 1; transformar: traducir Y (-10px); fondo: # f1c40f; caja de sombra: 0px 20px 3px rgba (0, 0, 0, 0.05); 100% opacidad: 0.3; transformar: traducirY (0px); cuadro de sombra: 0px 0px 3px rgba (0, 0, 0, 0.1);
Al igual que en el precargador 1, agregando animación-retraso a cada intervalo y compensando el retraso de cada vano en 2 milisegundos, crea el efecto de onda.
Esto es ... una cosa espinosa.
Aquí simplemente usamos un solo div para el círculo central y :después en ese div para crear las líneas exteriores.
Añadiendo un borde en la parte superior e inferior y dándole un radio del borde de 50px crea las dos lineas exteriores. Se agrega una animación a la división principal, solo para cambiar el color de la división principal y crear el efecto de rotación agregando transformar: rotar () . los :después Se agrega animación de elementos para cambiar el color del borde exterior..
# preloader5 posición: relativa; ancho: 30px; altura: 30px; fondo: # 3498db; radio del borde: 50px; Animación: preloader_5 1.5s infinito lineal; # preloader5: después de posición: absoluta; ancho: 50px; altura: 50px; borde superior: 10 px sólido # 9b59b6; borde inferior: 10 px sólido # 9b59b6; borde izquierdo: 10px sólido transparente; borde derecho: 10px sólido transparente; radio del borde: 50px; contenido: "; arriba: -20px; izquierda: -20px; animación: 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 sólido # 3498db; borde inferior: 10px sólido # 3498db; 100% borde superior: 10px sólido # 9b59b6; borde inferior: 10px sólido # 9b59b6;
Hemos pasado un poco de Microsoft en este caso ...
Este precargador se crea utilizando un div y cuatro tramos para crear cada cuadrado.
Estos cuadrados se colocan en forma de cuadrícula. La animación se agrega a la división principal para rotar todo el precargador. Otra animación se agrega a los tramos que los escala del 100% al 50%. Entonces agregamos animación-retraso a cada tramo para crear el efecto pulsante.
# preloader6 posición: relativa; ancho: 42px; altura: 42px; Animación: preloader_6 5s infinito lineal; # preloader6 span width: 20px; altura: 20px; posición: absoluta; fondo: rojo; bloqueo de pantalla; animación: preloader_6_span 1s infinito lineal; # preloader6 span: nth-child (1) background: # 2ecc71; # preloader6 span: nth-child (2) left: 22px; fondo: # 9b59b6; animación-retraso: .2s; # preloader6 span: nth-child (3) top: 22px; fondo: # 3498db; animación-retraso: .4s; # preloader6 span: nth-child (4) top: 22px; izquierda: 22px; fondo: # f1c40f; animación-retraso: .6s; @keyframes preloader_6_span 0% transform: scale (1); 50% transformar: escala (0.5); 100% transformar: escala (1);
La gran ventaja de usar los precargadores CSS3 sobre los precargadores de imágenes es que son escalables y están listos para retina. Eso significa que no importa en qué dispositivo se muestren, siempre serán nítidos, limpios y futuros (aunque hay que tener en cuenta que no todos los navegadores antiguos admiten la animación CSS3).
Al comprender algunas propiedades y técnicas importantes de CSS3, ahora debería poder crear sus propios precargadores de CSS3. Son divertidos de crear y con un poco de experimentación puedes crear animaciones realmente geniales para evitar que los usuarios abandonen tu sitio web.
Si has creado alguna precargadora genial recientemente, ¡me encantaría verlos! Sientáse libre de dejar sus comentarios debajo.
