Cargadores de elemento único: las barras

Hemos mirado a los hilanderos. Hemos mirado los puntos. Ahora vamos a abordar otro patrón común para los cargadores: bares . Y vamos a hacer lo mismo en este tercer artículo de la serie como lo hicimos 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 se basan en la misma estructura de código y solo actualizamos algunos valores para crear variaciones. Ese es todo el poder de CSS. No aprendemos cómo crear un cargador, pero aprendemos diferentes técnicas que nos permiten crear tantos cargadores como queramos utilizando simplemente la misma estructura de código.

¡Hagamos unas barras!

Comenzamos definiendo las dimensiones para ellos usando width (o height) con aspect-ratio para mantener la proporción:

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

En cierto modo, "falsificamos" tres barras con un degradado lineal en el fondo, 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 tratar muchos de background astucia. Entonces, si alguna vez sientes que estamos saltando demasiado rápido o si sientes que necesitas un poco más de detalle, échale un vistazo. También puedes leer mi Respuesta de desbordamiento de pila donde doy una explicación detallada sobre cómo funciona todo esto.

Animando las barras

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

Y esto es lo que obtenemos:

¿Te imaginas todas las variaciones posibles que podemos conseguir jugando con diferentes configuraciones de animación para los tamaños o las posiciones?

Arreglemos el tamaño a 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 tengas 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 un número infinito de posibilidades de cargador a nuestro alcance.

Y una vez que nos sintamos cómodos con esta técnica, podemos ir más allá y usar un degradado más complejo para crear incluso más, cargadores

Espere que para los dos últimos ejemplos en esa demostración, todos los cargadores de barras usen el mismo marcado y estilos subyacentes 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.

poniéndose elegante

¿Recordaste 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 una coloración elegante a nuestros cargadores.

Tomemos una demostración y actualicémosla:

Todo lo que hice fue actualizar todos los background-* mask-* y agregué una coloración degradada. Tan simple como eso y, sin embargo, obtenemos otro cargador genial.

Entonces, ¿no hay diferencia entre los puntos y las 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. Animando background-size y/o background-position para crear la animación del cargador
3. Añadiendo máscara para añadir un toque de colores.

redondeando las barras

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

Utilizando un elemento y su ::before y ::after pseudos, 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; }

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

Ahora el truco consiste en rellenar esas barras con un bonito degradado. Para simular un gradiente continuo, necesitamos jugar con background propiedades. En la figura anterior, el área verde define el área cubierta por el cargador. Esa área debería ser del tamaño del degradado y, si hacemos los cálculos, es igual a multiplicar ambos 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, estamos simulando un gradiente 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 el pseudo a la derecha, el fondo debe colocarse a la derecha:

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

Usando la misma variable CSS, --_i, que usamos para traducir, 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 la altura y agregar algunos retrasos! Aquí hay tres ejemplos donde todo lo que es diferente son los colores y tamaños:

Terminando

Espero que hasta ahora te sientas súper animado por todos los poderes que tienes para hacer animaciones de carga de apariencia compleja. Todo lo que necesitamos es un elemento, ya sea gradientes o pseudos para dibujar las barras, luego algunos fotogramas clave para mover las cosas. Esa es la receta completa para obtener un sinfín de posibilidades, ¡así que sal y comienza a cocinar cosas geniales!

Hasta el próximo artículo, los dejo con una divertida colección de cargadores donde estoy combinando los puntos y los bares!

---

Cargadores de elemento único: las barras publicado originalmente el Trucos CSS. Debieras obtener el boletín.

• Coinsmart. El mejor intercambio de Bitcoin y criptografía de Europa.
• Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. ACCESO LIBRE.
• CriptoHawk. Radar de altcoins. Prueba gratis.
• Fuente: https://css-tricks.com/single-element-loaders-the-bars/