Cargadores de un solo elemento: trucos CSS

Estamos viendo cargadores en esta serie. Además, estamos desglosando algunos patrones de arranque comunes y cómo recrearlos con nada más que un div. Hasta ahora hemos elegido la clásica carga giratoria. Ahora, veamos otro que probablemente conozcas bien: puntos.

Las herramientas de carga de puntos están en todas partes. Son pulcras porque suelen constar de tres puntas que parecen dos puntos (...) dando vueltas.

Nuestro objetivo aquí es hacer lo mismo desde un elemento div. En otras palabras, no hay un solo div por punto o animaciones separadas para cada punto.

Este ejemplo de carga anterior está hecho con un elemento div, varias declaraciones CSS y sin pseudoelementos. Combino dos técnicas usando CSS background y maskY cuando hayamos terminado, veremos cómo animar un degradado de fondo ayuda a crear la ilusión de que cada punto cambia de color a medida que se mueve hacia arriba y hacia abajo secuencialmente.

Animación de fondo

Comencemos con la animación de fondo:

.loader {
  width: 180px; /* this controls the size */
  aspect-ratio: 8/5; /* maintain the scale */
  background: 
    conic-gradient(red   50%, blue   0) no-repeat, /* top colors */
    conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */
  background-size: 200% 50%; 
  animation: back 4s infinite linear; /* applies the animation */
}

/* define the animation */
@keyframes back {
  0%,                       /* X   Y , X     Y */
  100% { background-position: 0%   0%, 0%   100%; }
  25%  { background-position: 100% 0%, 0%   100%; }
  50%  { background-position: 100% 0%, 100% 100%; }
  75%  { background-position: 0%   0%, 100% 100%; }
}

Espero que esto parezca bastante simple. Lo que tenemos es un 180px-amplio .loader elemento que muestra dos degradados cónicos con frenos de color sólido entre dos colores cada uno: el primer degradado es rojo y azul en la mitad superior de .loadery el segundo degradado es verde y morado en la mitad inferior.

La forma en que se dimensiona el fondo de carga (200% ancho), vemos solo uno de estos colores en cada mitad a la vez. Luego tenemos esta pequeña animación que empuja la posición de estos gradientes contra el fondo hacia la izquierda, hacia la derecha y hacia atrás para siempre.

Cuando se trata de propiedades de fondo, especialmente background-position Siempre me refiero a la mía. Respuesta a Stack Overflow, donde doy una explicación detallada sobre cómo funciona todo. Si no se siente cómodo con las estafas de CSS, le recomiendo leer esta respuesta para ayudarlo con lo que sigue.

En la animación, observe que la primera capa es Y=0% (colocado encima) mientras X ha cambiado de 0% a 100%. Para la segunda capa tenemos lo mismo para X pero Y=100% (colocado en la parte inferior).

¿Por qué usar un conic-gradient() en cambio linear-gradient()?

¡Buena pregunta! Intuitivamente, necesitamos usar un degradado lineal para crear degradados de dos colores como este:

linear-gradient(90deg, red 50%, blue 0)

Pero también podemos lograr lo mismo usando un conic-gradient() - y con menos código. ¡Estamos reduciendo el código y también aprendiendo un nuevo truco en el proceso!

Deslizar los colores hacia la izquierda y hacia la derecha es una buena manera de hacer que parezca que estamos cambiando de color, pero puede ser mejor cambiar los colores inmediatamente, para que no haya posibilidad de que un punto de carga parpadee con dos colores a la vez. animationfunción de sincronización de tiempo de linear a steps(1)

Puntos de carga

Si siguió el primer artículo de esta serie, apuesto a que sabe lo que sigue: ¡Máscaras CSS! Lo que hace que las máscaras sean tan geniales es que nos permiten "recortar" partes del fondo en forma de otro elemento. Entonces, en este caso, queremos hacer algunos puntos, mostrar los degradados del fondo a través de los puntos y recortar todas las partes del fondo que no forman parte de un punto.

Usaremos radial-gradient() para esto:

.loader {
  width: 180px;
  aspect-ratio: 8/5;
  mask:
    radial-gradient(#000 68%, #0000 71%) no-repeat,
    radial-gradient(#000 68%, #0000 71%) no-repeat,
    radial-gradient(#000 68%, #0000 71%) no-repeat;
  mask-size: 25% 40%; /* the size of our dots */
}

Hay un código duplicado allí, así que hagamos una variable CSS para reducir las cosas:

.loader {
  width: 180px;
  aspect-ratio: 8/5;
  --_g: radial-gradient(#000 68%, #0000 71%) no-repeat;
  mask: var(--_g),var(--_g),var(--_g);
  mask-size: 25% 40%;
}

Genial genial Pero ahora necesitamos una nueva animación que ayude a mover los puntos hacia arriba y hacia abajo entre los degradados animados.

.loader {
  /* same as before */
  animation: load 2s infinite;
}

@keyframes load {      /* X  Y,     X   Y,    X   Y */
  0%     { mask-position: 0% 0%  , 50% 0%  , 100% 0%; } /* all of them at the top */
  16.67% { mask-position: 0% 100%, 50% 0%  , 100% 0%; }
  33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; }
  50%    { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */
  66.67% { mask-position: 0% 0%  , 50% 100%, 100% 100%; }
  83.33% { mask-position: 0% 0%  , 50% 0%  , 100% 100%; }
  100%   { mask-position: 0% 0%  , 50% 0%  , 100% 0%; } /* all of them at the top */
}

Sí, estos son un total de tres degradados radiales en el interior, todos con la misma configuración y el mismo tamaño: la animación actualizará la posición de todos. tenga en cuenta que el X la coordenada de cada punto es fija mask-position se define de modo que el primer punto está a la izquierda (0%), el segundo en el centro50%), y el tercero a la derecha100%). solo estamos actualizando Y coordenadas desde 0% a 100% para hacer bailar los puntos.

Esto es lo que obtenemos:

Ahora combine esto con nuestra animación de degradado y la magia comienza a suceder:

Variaciones de la carga con puntos

La variable CSS que hicimos en el último ejemplo hace que todo sea mucho más fácil para cambiar nuevos colores y crear más variaciones de la misma herramienta de carga. Por ejemplo, diferentes colores y tamaños:

¿Qué tal otro movimiento para nuestros puntos?

Aquí todo lo que hice fue actualizar la animación a ¡Veamos diferentes posiciones y consigamos otro cargador con la misma estructura de código!

La técnica de animación que usé para las capas de máscara también se puede usar con capas de fondo para crear muchos cargadores diferentes de un solo color. Escribí un artículo detallado sobre esto. Verás que a partir de una misma estructura de código podemos crear distintas variaciones simplemente cambiando varios valores. Comparto algunos ejemplos al final del artículo.

¿Por qué no un cargador de un punto?

Esto debería ser bastante fácil de detectar, ya que uso la misma técnica, pero con una lógica más simple:

Aquí hay otro ejemplo de carga, donde también animo radial-gradient combinado con filtros CSS y mix-blend-mode para crear un efecto puntual:

Si revisa el código, verá que todo lo que realmente hago allí es animar background-positiontal como hicimos con el arranque anterior, pero con la adición de un guión de background-size para que la mancha parezca más grande a medida que absorbe los puntos.

Si quieres entender la magia detrás de este efecto de mancha, puedes recurrir a estas diapositivas interactivas (solo cromo) de ana tudor porque cubre muy bien el tema!

Aquí hay otra idea para los puntos de carga, esta vez usando una técnica diferente:

Estas son solo 10 declaraciones CSS y un fotograma clave. El elemento principal y sus dos pseudoelementos tienen la misma configuración de fondo con un degradado radial. Cada uno de ellos crea un punto, un total de tres. La animación mueve el degradado de arriba a arriba. a continuación, utilizando diferentes retardos para cada punto..

Ah, y observe cómo esta demostración utiliza CSS Grid. Esto nos permite usar el estándar para la red. stretch alineación para que ambos pseudo-elementos cubran toda el área de su padre. ¡No hay necesidad de dimensionar! Presione un poco alrededor con translate() y estamos listos

¡Más ejemplos!

Solo para aclarar la idea, quiero dejarte con un montón de ejemplos adicionales que en realidad son variaciones de lo que vimos. Al mirar las demostraciones, verá que los enfoques que hemos discutido aquí son súper flexibles y revelan muchas posibilidades de diseño.

Próximo…

De acuerdo, miramos los puntos de carga en este artículo y los giradores en el último. En el próximo artículo de esta serie de cuatro partes, centraremos nuestra atención en otro tipo común de carga: los bares. Tomaremos gran parte de lo que hemos aprendido hasta ahora y veremos cómo podemos expandirlo para crear otra carga de un elemento con la menor cantidad de código posible y la mayor flexibilidad posible.