Cargadores de un solo elemento: los puntos | consejos CSS

Repasamos los cargadores de esta serie. Más que eso, desglosamos algunos patrones de cargador comunes y cómo recrearlos con nada más que un solo div. Hasta ahora hemos elegido el clásico cargador rotativo. Ahora, veamos otro con el que probablemente estés familiarizado: los puntos.

Los cargadores puntuales están en todas partes. Son geniales porque generalmente consisten en tres puntos que parecen elipses de texto que bailan (…).

Serie de artículos

  • Revistas de un solo elemento: The Spinner
  • Cargadores de un solo elemento: los puntos — Estás ahí
  • Cargadores de un solo elemento: las barras — próximo 24 de junio
  • Cargadores de un solo elemento: en 3D — próximo 1 de julio

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

Este cargador de muestra anterior se compone de un solo elemento div, algunas declaraciones CSS y ningún pseudoelemento. 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 sube y baja sucesivamente.

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 suene lo suficientemente simple. Lo que tenemos es un 180px-amplio .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 .loadery 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% de ancho), solo vemos uno de estos 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 esta 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 debajo).

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

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

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

Pero también podemos lograr el mismo objetivo usando un conic-gradient() — y con menos código. ¡Minimizamos el código y también aprendemos un nuevo truco en el proceso!

Arrastrar 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 cambiar los colores instantáneamente; de ​​esa manera, no hay posibilidad de que un punto de carga parpadee con dos colores al mismo tiempo. Para hacer esto, vamos a cambiar el animationla función de sincronización de linear a steps(1)

Puntos de recarga

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 de un fondo como otro elemento. Entonces, en este caso, queremos crear algunos puntos, mostrar los degradados de fondo a través de los puntos y recortar 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 creemos una variable CSS para facilitar 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 puntos hacia arriba y hacia abajo entre 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í, eso es un total de tres degradados radiales, todos con la misma configuración y 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 modo que el primer punto está a la izquierda (0%), el segundo en el centro (50%), y el tercero a la derecha (100%). solo actualizamos Y coordinar desde 0% a 100% para hacer bailar los puntos.

Puntos del cargador de puntos con etiquetas que indican sus posiciones cambiantes.

Esto es lo que obtenemos:

Ahora combine eso con nuestra animación de gradiente y la magia comienza a suceder:

Variantes de cargadores puntuales

La variable CSS que creamos en el último ejemplo hace que sea mucho más fácil intercambiar nuevos colores y crear múltiples 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 tener en cuenta las diferentes posiciones, ¡y obtenemos 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 color. Escribí un artículo detallado al respecto. Verás que a partir de una misma estructura de código puedes crear diferentes variantes simplemente cambiando unos pocos valores. Comparto algunos ejemplos al final del artículo.

¿Por qué no una revista con un punto?

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

Aquí hay otro ejemplo de cargador donde también animo 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 estoy haciendo allí es animar el background-positionexactamente como hicimos con el cargador anterior, pero agregando un toque de background-size para hacer que la mancha se vea más grande a medida que absorbe los puntos.

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

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

Este solo contiene 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 hacia arriba y hacia abajo utilizando diferentes retrasos para cada punto.

Ah, y observe cómo esta demostración usa CSS Grid. Esto nos permite aprovechar la cuadrícula predeterminada. stretch alineación para que los dos pseudo-elementos cubran toda la superficie de su padre. ¡No hay necesidad de dimensionar! Muévete con él 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 vimos. Al ver las demostraciones, verá que los enfoques que hemos cubierto aquí son súper flexibles y abren toneladas de posibilidades de diseño.

Próximo…

Bien, cubrimos los cargadores de puntos en este artículo y los giradores en el último. En el siguiente 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 hemos aprendido hasta ahora y veremos cómo podemos ampliarlo para crear otro cargador de un solo elemento con la menor cantidad de código y la mayor flexibilidad posible.

Serie de artículos

  • Revistas de un solo elemento: The Spinner
  • Cargadores de un solo elemento: los puntos — Estás ahí
  • Cargadores de un solo elemento: las barras — próximo 24 de junio
  • Cargadores de un solo elemento: en 3D — próximo 1 de julio

Si quieres conocer otros artículos parecidos a Cargadores de un solo elemento: los puntos | 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