Cargadores de celda única: Barras trucos CSS

Miramos los hilanderos. Miramos los puntos. Ahora pasaremos a otro modelo común para cargadores: barrasY haremos lo mismo en este tercer artículo de la serie como hemos hecho con los demás, haciéndolo con un solo elemento y CSS flexible, lo que facilita la creación de variaciones.

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

Qué ?! ¿Puedes describir cada uno de ellos? ¡Eso es demasiado para un artículo!

¡Puede parecerlo a primera vista! Pero todos se basan en la misma estructura de código y solo actualizamos algunos valores para crear variaciones. Este es todo el poder de CSS. No aprendemos cómo crear un solo arranque, pero aprendemos diferentes técnicas que nos permiten crear tantas botas como queramos usando la misma estructura de código.

¡Hagamos algunas barras!

Comenzamos determinando las dimensiones para ellos. width (o height) s aspect-ratio para mantener la proporción:

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

De alguna manera, estamos "falsificando" tres bandas con un degradado lineal en el fondo, muy similar a la forma en que creamos los puntos de carga 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, trataremos mucho background fraude. Entonces, si alguna vez sientes que estamos saltando demasiado rápido o crees que necesitas un poco más de detalle, échales un vistazo. También puedes leer el mío. Stack Overflow corresponde a donde doy explicación detallada sobre cómo funciona todo.

Animar las cintas

Animamos el tamaño o la posición del elemento para crear la barra de carga. Animemos el tamaño definiendo 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 background-size del degradado del fondo del elemento. Cada fotograma clave establece tres tamaños de fondo (uno para cada degradado).

Y esto es lo que obtenemos:

¿Empiezas a imaginar todas las posibles variaciones que podemos conseguir jugando con diferentes configuraciones de animación para tamaños o posiciones?

Ajustemos el tamaño de 20% 50% y actualice los artículos 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 trae otro cargador!

Probablemente ya entiendas el truco. Todo lo que necesita hacer es definir una línea de tiempo para traducir a un fotograma clave. Al animar el tamaño, la posición, ¡o ambos! - Hay una infinidad de opciones de carga a tu alcance.

Y una vez que nos calmemos con esa técnica, podemos ir más allá y usar un degradado más complejo para crear un Más ▼ cargadores

Espere que en los dos últimos ejemplos de esta demostración, todos los cargadores de cinta utilicen las mismas marcas y estilos básicos y diferentes combinaciones de animaciones. Abra el código e intente visualizar cada cuadro de forma independiente; verá lo relativamente trivial que es hacer docenas - si no cientos - de variaciones.

me estoy haciendo una fantasia

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

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

Tomemos una demostración y actualicémosla:

Todo lo que hice fue actualizar a todos background-* s mask-* y agregue un color degradado. Tan simple y, sin embargo, tenemos otra carga genial.

Entonces, ¿no hay diferencia entre puntos y bandas?

¡Ninguna diferencia! He escrito 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 formas (puntos o rayas o tal vez algo más)
2. Animación background-size y/o background-position para crear una animación de arranque
3. Añadir una máscara para añadir un toque de color.

Redondeando las rejillas

Probemos algo diferente esta vez, donde podamos sortear los bordes de nuestros carriles.

Usar un elemento y su ::before y ::after pseudo, definimos tres bandas 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 bandas, esta vez sin depender de un gradiente lineal:

Ahora el truco es llenar estas bandas con un degradado maravilloso. Para simular un gradiente continuo, necesitamos 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 gradiente y, si hacemos los cálculos, es igual a la multiplicación de los dos lados indicados S del diagrama, o background-size: var(--s) var(--s).

Dado que nuestros artículos se colocan individualmente, debe actualizamos la posición del degradado en 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 de la izquierda, necesitamos el fondo de la izquierda

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

Y para la pseudo-derecha, el fondo debe ubicarse 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 de la siguiente manera:

.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 la altura y agregar un poco de retraso! Aquí hay tres ejemplos donde todo lo que es diferente son los colores y los tamaños:

resumiendo

Espero que ahora te sientas súper animado por todo el poder que tienes para hacer animaciones de arranque de aspecto intrincado. Todo lo que necesitamos es un elemento, degradados o un pseudo para dibujar las barras, luego algunos fotogramas clave para mover las cosas. Esta es la receta completa para obtener un número infinito de posibilidades, ¡así que sal y comienza a cocinar algunas cosas buenas!

Hasta el proximo articulo les dejare una divertida coleccion de cargadores donde combino puntos y los bares!!