Cargadores de un solo elemento: los puntos

Estamos buscando cargadores en esta serie. Más que eso, estamos desglosando algunos patrones de cargador comunes y cómo volver a crearlos con nada más que un solo div. Hasta ahora, hemos separado el clásico cargador giratorio. Ahora, echemos un vistazo a otro que probablemente conozcas: los puntos.

Los cargadores de puntos están por todas partes. Son geniales porque generalmente consisten en tres puntos que parecen puntos suspensivos de texto (...) que bailan alrededor.

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

Ese ejemplo de un cargador arriba está hecho con un solo elemento div, algunas declaraciones CSS y ningún pseudo-elemento. Estoy combinando dos técnicas usando CSS. background y mask. Y 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 mueven hacia arriba y hacia abajo en sucesión.

La 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 sencillo. Lo que tenemos es un 180pxde ancho .loader elemento que muestra dos degradados cónicos con paradas de color duras entre dos colores cada uno: el primer degradado es rojo y azul a lo largo de la mitad superior del .loader, y el segundo degradado es verde y morado a lo largo de la mitad inferior.

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

Cuando se trata de propiedades de fondo, especialmente background-position — Siempre me refiero a mi Respuesta de desbordamiento de pila donde doy una explicación detallada sobre cómo funciona todo esto. Si no se siente cómodo con los trucos de fondo de CSS, le recomiendo leer esa respuesta para ayudarlo con lo que viene a continuación.

En la animación, observe que la primera capa es Y=0% (colocado en la parte superior) mientras X son cambios 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 lugar de linear-gradient()?

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

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

Pero también podemos llegar a lo mismo usando un conic-gradient() — y con menos código. ¡Reducimos el código y también aprendemos 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 podría ser mejor si cambiamos los colores instantáneamente; de ​​esa manera, no hay posibilidad de que un punto del cargador muestre dos colores al mismo tiempo. . Para hacer esto, vamos a cambiar el animationla función de temporización de linear a steps(1)

Los puntos del cargador

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

Vamos a usar 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 simplificar 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%;
}

Guay guay. 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í, ahí hay un total de tres degradados radiales, todos con la misma configuración y el mismo tamaño: la animación actualizará la posición de cada uno. Tenga en cuenta que el X la coordenada de cada punto es fija. los mask-position se define de tal manera que el primer punto está a la izquierda (0%), el segundo en el centro (50%), y el tercero a la derecha (100%). Solo actualizamos el Y coordinar 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 comenzará a suceder:

Variaciones del cargador de puntos

La variable CSS que hicimos en el último ejemplo hace que sea mucho más fácil intercambiar nuevos colores y crear más variaciones del mismo cargador. Por ejemplo, diferentes colores y tamaños:

¿Qué tal otro movimiento para nuestros puntos?

Aquí, todo lo que hice fue actualizar la animación para considerar diferentes posiciones, ¡y obtuvimos 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 con un solo color. Escribí un artículo detallado sobre esto. Verás que a partir de la misma estructura de código podemos crear diferentes variaciones simplemente cambiando unos pocos valores. Estoy compartiendo algunos ejemplos al final del artículo.

¿Por qué no un cargador con un punto?

Este debería ser bastante fácil de asimilar ya que estoy usando la misma técnica pero con una lógica más simple:

Aquí hay otro ejemplo de cargador donde también estoy animando. radial-gradient combinado con Filtros CSS y mix-blend-mode para crear un efecto de blobby:

Si revisa el código, verá que todo lo que realmente estoy haciendo allí es animar el background-position, exactamente como hicimos con el cargador anterior, pero agregando una pizca de background-size para que parezca que la gota se hace más grande a medida que absorbe los puntos.

Si desea comprender la magia detrás de ese efecto blob, puede consultar estas diapositivas interactivas (solo Chrome) por ana tudor porque ella cubre el tema tan bien!

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

Esta es 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 crea un punto, para un total de tres. La animación mueve el degradado de arriba a abajo utilizando diferentes retrasos para cada punto.

Ah, y toma nota de cómo esta demostración usa CSS Grid. Esto nos permite aprovechar el valor predeterminado de la red stretch alineación para que ambos pseudo-elementos cubran toda el área de su padre. ¡No hay necesidad de dimensionar! Empuje el alrededor un poco con translate() y estamos listos.

¡Más ejemplos!

Solo para aclarar el punto, quiero dejarte con un montón de ejemplos adicionales que en realidad son variaciones de lo que hemos visto. A medida que vea las demostraciones, verá que los enfoques que hemos cubierto aquí son súper flexibles y abren toneladas de posibilidades de diseño.

El siguiente ...

Bien, cubrimos los cargadores de puntos 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 cargador: los bares. Tomaremos mucho de lo que aprendimos hasta ahora y veremos cómo podemos extenderlo para crear otro cargador de un solo elemento con la menor cantidad de código y la mayor flexibilidad posible.

---

Cargadores de un solo elemento: los puntos 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-dots/