Cargadores de elemento único: las barras | consejos CSS

Miramos los hilanderos. Miramos los puntos. Ahora discutiremos otro patrón común para los cargadores: barras. Y vamos a hacer lo mismo en este tercer artículo de la serie que tenemos con los demás, haciéndolo con un solo elemento y con CSS flexible que facilita la creación de variaciones.

Comencemos con no uno, ni dos, sino 20 ejemplos de cargadores de barras.

¡¿Qué?! ¿Vas a detallar cada uno de ellos? ¡Eso es demasiado para un artículo!

¡Puede parecer así a primera vista! Pero todos ellos se basan en la misma estructura de código y solo actualizamos algunos valores para crear variaciones. Ese es el poder de CSS. No aprendemos cómo crear un cargador, pero aprendemos diferentes técnicas que nos permiten crear tantos cargadores como queramos simplemente usando la misma estructura de código.

¡Hagamos barras!

Comenzamos definiendo sus dimensiones usando width (Dónde height) con aspect-ratio mantener la proporción:

.bars {
  width: 45px;
  aspect-ratio: 1;
}

Estamos clasificando tres barras "falsas" con un degradado lineal en la parte inferior, muy similar a cómo creamos cargadores de puntos en la Parte 2 de esta serie.

.bars {
  width: 45px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}

El código anterior nos dará el siguiente resultado:

Al igual que los otros artículos de esta serie, vamos a cubrir una gran cantidad de background engaño. Entonces, si alguna vez siente que estamos saltando demasiado rápido o necesita un poco más de detalle, échele un vistazo. También puede leer mi respuesta de Stack Overflow donde doy una explicación detallada de cómo funciona todo.

animacion de bares

O animamos el tamaño o la posición del elemento para crear el cargador de barras. Animemos el tamaño configurando los siguientes fotogramas clave de animación:

@keyframes load {
  0%   { background-size: 20% 100%, 20% 100%, 20% 100%; }  /* 1 */
  33%  { background-size: 20% 10% , 20% 100%, 20% 100%; }  /* 2 */
  50%  { background-size: 20% 100%, 20% 10% , 20% 100%; }  /* 3 */
  66%  { background-size: 20% 100%, 20% 100%, 20% 10%;  }  /* 4 */
  100% { background-size: 20% 100%, 20% 100%, 20% 100%; }  /* 5 */
}

¿Ves lo que está pasando allí? Entre 0% y 100%, la animación cambia el background-size del degradado de fondo del elemento. Cada fotograma clave define tres tamaños de fondo (uno para cada degradado).

Y esto es lo que obtenemos:

¿Puedes comenzar a imaginar todas las posibles variaciones que podemos lograr al jugar con diferentes configuraciones de animación para tamaños o posiciones?

Arreglemos el tamaño en 20% 50% y actualice las posiciones esta vez:

.loader {
  width: 45px;
  aspect-ratio: .75;
  --c: no-repeat linear-gradient(#000 0 0);
  background: 
    var(--c),
    var(--c),
    var(--c);
  background-size: 20% 50%;
  animation: load 1s infinite linear;
}
@keyframes load {
  0%   { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */
  20%  { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */
  40%  { background-position: 0% 0%  , 50% 50% , 100% 100%; } /* 3 */
  60%  { background-position: 0% 100%, 50% 0%  , 100% 50%;  } /* 4 */
  80%  { background-position: 0% 100%, 50% 100%, 100% 0%;   } /* 5 */ 
  100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

…¡lo que nos da otro cargador!

Probablemente ya hayas descubierto el truco. Todo lo que necesita es definir una línea de tiempo que se traduzca en un fotograma clave. Al animar el tamaño, la posición, ¡o ambos! — hay infinitas posibilidades de cargador al alcance de su mano.

Y una vez que nos sintamos cómodos con esa técnica, podemos ir más allá y usar degradados más complejos para crear incluso Después cargadores

Espere que para los dos últimos ejemplos de esta demostración, todos los cargadores de barras usarán el mismo marcado y estilos subyacentes y diferentes combinaciones de animaciones. Abra el código e intente ver cada cuadro de forma independiente; verá lo relativamente trivial que es hacer docenas, si no cientos, de variaciones.

ponte elegante

¿Recuerdas el truco de la máscara que hicimos con los cargadores de puntos en el segundo artículo de esta serie? ¡Podemos hacer lo mismo aquí!

Si aplicamos toda la lógica anterior dentro del mask propiedad, podemos usar cualquier configuración de fondo para agregar colores de fantasía a nuestros cargadores.

Tomemos una demostración y actualicémosla:

Todo lo que hice fue actualizar todo background-* con mask-* y agregué colorante degradado. Tan simple como eso y, sin embargo, obtenemos otro cargador genial.

Entonces, ¿no hay diferencia entre puntos y barras?

¡Ninguna diferencia! Escribí dos artículos diferentes para cubrir tantos ejemplos como sea posible, pero en ambos me baso en las mismas técnicas:

  1. Gradientes para crear las formas (puntos o barras o tal vez algo más)
  2. Animación background-size y O background-position para crear la animación del cargador
  3. Adición de máscara para añadir un toque de colores.

Barras redondas

Probemos algo diferente esta vez donde podemos redondear los bordes de nuestras barras.

Usar un elemento y su ::before y ::after nicks, definimos tres barras idénticas:

.loader {
  --s: 100px; /* control the size */

  display: grid;
  place-items: center;
  place-content: center;
  margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after {
  height: var(--s);
  width: calc(var(--s) / 5); /* 20px */
  border-radius: var(--s);
  transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i:  1; }

Esto nos da tres barras, esta vez sin depender de un gradiente lineal:

Ahora el truco es llenar esas barras con un buen degradado. Para simular un gradiente continuo, tienes que jugar con background Propiedades. En la figura anterior, el área verde define el área cubierta por el cargador. Esta área debe ser del tamaño del degradado y si hacemos los cálculos equivale a multiplicar los dos lados etiquetados S en el diagrama, o background-size: var(--s) var(--s).

Dado que nuestros elementos se colocan individualmente, debemos actualizar la posición del degradado dentro de cada uno para asegurarnos de que todos se superpongan. De esta forma simulamos un degradado continuo aunque en realidad son tres.

Para el elemento principal (colocado en el centro), el fondo debe estar en el centro. Usamos lo siguiente:

.loader {
  /* etc. */
  background: linear-gradient() 50% / var(--s) var(--s);
}

Para el pseudo-elemento izquierdo, necesitamos el fondo izquierdo

.loader::before {
  /* etc. */
  background: linear-gradient() 0% / var(--s) var(--s);
}

Y para el apodo de la derecha, el fondo debe colocarse a la derecha:

.loader::after {
  background: linear-gradient() 100% / var(--s) var(--s);
}

Usando la misma variable CSS, --_ique usamos para la traducción, podemos escribir el código así:

.loader {
  --s: 100px; /* control the size */
  --c: linear-gradient(/* etc. */); /* control the coloration */

  display: grid;
  place-items: center;
  place-content: center;
}
.loader::before,
.loader::after{
  content: "";
  grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{
  height: var(--s);
  width: calc(var(--s) / 5);
  border-radius: var(--s);
  background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s);
  transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after  { --_i:  1; }

¡Ahora todo lo que tenemos que hacer es animar el tono y agregar algunos retrasos! Aquí hay tres ejemplos donde solo los colores y los tamaños son diferentes:

Envolver

Con suerte, hasta ahora, te sientes súper animado por todo el poder que tienes para crear animaciones de carga intrincadas. Todo lo que necesitamos es un elemento, ya sea gradientes o muescas para dibujar las barras, y luego algunos fotogramas clave para mover las cosas. Esa es la receta completa para infinitas posibilidades, ¡así que sal y comienza a cocinar cosas geniales!

A la espera del próximo artículo, os dejo con una divertida colección de cargadores donde combino los puntos y los bares!

Si quieres conocer otros artículos parecidos a Cargadores de elemento único: las barras | consejos CSS puedes visitar la categoría Estilo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas