Revistas de un solo elemento: The Spinner | consejos CSS

Crear cargadores solo de CSS es una de mis tareas favoritas. Siempre es satisfactorio ver estas animaciones interminables. Y, por supuesto, hay mucho técnicas y enfoques para hacerlos: no necesita mirar más allá de CodePen para ver cuántos. En este artículo, sin embargo, veremos cómo hacer que un cargador de un solo elemento escriba la menor cantidad de código posible.

He creado una colección de más de 500 cargadores div únicos y en esta serie de cuatro partes compartiré los trucos que he usado para crear muchos de ellos. Cubriremos muchos ejemplos, mostrando cómo los pequeños ajustes pueden conducir a variaciones divertidas, ¡y cuán poco código necesitamos escribir para que todo suceda!

Serie de cargadores de un solo elemento:

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

Para este primer artículo, vamos a crear uno de los diseños de cargadores más comunes: las barras de giro:

Aquí está el proceso

Una implementación trivial para este cargador es crear un elemento para cada barra envuelta en un elemento principal (para nueve elementos en total), luego jugar con opacity y transform para conseguir el efecto de giro.

Mi implementación, sin embargo, requiere solo un elemento:

<div class="loader"></div>

…y 10 declaraciones CSS:

.loader {
  width: 150px; /* control the size */
  aspect-ratio: 1;
  display: grid;
  mask: conic-gradient(from 22deg, #0003, #000);
  animation: load 1s steps(8) infinite;
}
.loader,
.loader:before {
  --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
  background: 
    var(--_g)/34% 8%  space no-repeat,
    var(--_g)/8%  34% no-repeat space;
}
.loader:before {
  content: "";
  transform: rotate(45deg);
}
@keyframes load {
  to { transform: rotate(1turn); }
}

vamos a desglosarlo

A primera vista, el código puede parecer extraño, pero descubrirá que es más simple de lo que piensa. El primer paso es definir la dimensión del elemento. En nuestro caso, es un 150px cuadrado. podemos poner aspect-ratio para usar para mantener el elemento cuadrado sin importar qué.

.loader {
  width: 150px; /* control the size */
  aspect-ratio: 1; /* make height equal to width */
}

Cuando construyo cargadores CSS, siempre trato de tener un valor para controlar el tamaño total. En este caso, es el width y todos los cálculos que cubrimos se referirán a este valor. Esto me permite cambiar un solo valor para controlar el cargador. Siempre es importante poder ajustar fácilmente el tamaño de nuestros cargadores sin tener que ajustar muchos valores adicionales.

A continuación, usaremos degradados para crear las barras. ¡Esta es la parte más complicada! usar a degradado para crear de ellos barras de la siguiente manera:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;
Mostrando el espacio entre dos líneas de degradado para un cargador de un solo elemento.

Nuestro degradado se define con un color y dos paradas de color. El resultado es un color sólido sin desvanecimientos ni transiciones. El tamaño es igual a 34% ancho y 8% alto. También se coloca en el centro (50%). El truco es usar el valor de la palabra clave space - esto duplica el gradiente, dándonos dos barras en total.

De las especificaciones:

La imagen se repite tantas veces como sea posible en el área de posicionamiento de fondo sin cortarse, luego las imágenes se espacian para llenar el área. El primer y el último fotograma tocan los bordes del área.

Yo uso un ancho igual a 34% lo que significa que no podemos tener más de dos compases (3*34% es mayor que 100%) pero con dos barras tendremos espacios vacíos (100% - 2 * 34% = 32%). Este espacio se coloca en el centro entre las dos barras. En otras palabras, usamos un ancho para el gradiente entre 33% y 50% para asegurarnos de que tenemos al menos dos barras con algo de espacio entre ellas. El valor space es lo que los coloca correctamente para nosotros.

Hacemos lo mismo y hacemos un segundo degradado similar para obtener dos barras más en la parte superior e inferior, lo que nos da una background valor de la tierra de:

background: 
 linear-gradient(#17177c 0 0) 50%/34% 8%  space no-repeat,
 linear-gradient(#17177c 0 0) 50%/8%  34% no-repeat space;

Podemos optimizar esto usando una variable CSS para evitar repeticiones:

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: 
 var(--_g)/34% 8%  space no-repeat,
 var(--_g)/8%  34% no-repeat space;

Así que ahora tenemos cuatro barras y, gracias a las variables CSS, podemos escribir el valor del color solo una vez, lo que facilita la actualización posterior (como hicimos con el tamaño del cargador).

Para crear las barras restantes, toque en el .loader elemento y sonido ::before pseudo-elemento para obtener cuatro compases más para un gran total de ocho en total.

.loader {
  width: 150px; /* control the size */
  aspect-ratio: 1;
  display: grid;
}
.loader,
.loader::before {
  --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
  background: 
    var(--_g)/34% 8%  space no-repeat,
    var(--_g)/8%  34% no-repeat space;
}
.loader::before {
  content: "";
  transform: rotate(45deg);
}

Nótese el uso de display: grid. Esto nos permite confiar en el valor predeterminado de la red. stretch alineación para que el pseudoelemento cubra toda la superficie de su padre; por lo tanto, no es necesario especificar una dimensión en él: ¡otro truco que reduce el código y nos evita tener que lidiar con muchos valores!

Ahora gire el pseudo-elemento de 45deg para colocar las barras restantes. Pase el cursor sobre la siguiente demostración para ver el truco:

Ajuste de opacidad

Lo que estamos tratando de hacer es crear la impresión de que hay una barra que deja un rastro de barras que se desvanecen detrás de ella mientras recorre un camino circular. Lo que necesitamos ahora es jugar con la transparencia de nuestras barras para hacer esta pista, que vamos a hacer con CSS mask combinado con un gradiente cónico de la siguiente manera:

mask: conic-gradient(from 22deg,#0003,#000);

Para ver mejor el truco, apliquemos esto a un cuadro de color:

La transparencia del color rojo aumenta gradualmente en el sentido de las agujas del reloj. Aplicamos esto a nuestro cargador y tenemos las barras con una opacidad diferente:

Gradiente radial más barras de desplazamiento es equivalente a barras de desplazamiento con degradados.

En realidad, cada barra parece desvanecerse porque está enmascarada por un degradado y cae entre dos colores semitransparentes. Apenas se nota cuando está funcionando, por lo que es como poder decir que todas las barras son del mismo color con un nivel diferente de opacidad.

la rotación

Apliquemos una animación de rotación para obtener nuestro cargador. Tenga en cuenta que necesitamos una animación por pasos y no una animación continua, por eso uso steps(8). 8 no es más que el número de barras, por lo que el valor se puede cambiar dependiendo del número de barras utilizadas.

.loader {
  animation: load 3s steps(8) infinite;
}

/* Same as before: */
@keyframes load {
  to { transform: rotate(1turn) }
}

¡Eso es! Tenemos nuestro cargador con un solo elemento y unas pocas líneas de CSS. Podemos controlar fácilmente su tamaño y color ajustando un valor.

Como solo usamos el ::before pseudo-elemento, podemos agregar cuatro barras más usando ::after para terminar con 12 barras en total y casi el mismo código:

Actualizamos la rotación de nuestros pseudo-elementos para considerar 30deg y 60deg en lugar de 45deg mientras usa una animación de doce pasos, en lugar de ocho. También reduje la altura a 5% en lugar de 8% para hacer las barras un poco más delgadas.

Nótese también que tenemos grid-area: 1/1 en pseudo-elementos. Esto nos permite colocarlos en la misma área uno del otro, apilados uno encima del otro.

¿Adivina qué? Podemos llegar al mismo cargador usando otra implementación:

¿Puedes entender la lógica detrás del código? Una pista: la opacidad ya no se gestiona con CSS mask pero dentro del gradiente y también usa el opacity propiedad.

¿Por qué no puntos en su lugar?

Absolutamente puedes hacer esto:

Si revisa el código, verá que ahora estamos trabajando con un degradado radial en lugar de uno lineal. De lo contrario, el concepto es exactamente el mismo donde la máscara crea la impresión de opacidad, pero hicimos las formas como círculos en lugar de líneas.

A continuación se muestra una figura para ilustrar la nueva configuración de gradiente:

Mostrando la ubicación de los puntos en el cargador de un solo elemento.

Si está utilizando Safari, tenga en cuenta que la demostración puede tener errores. Esto se debe a que Safari actualmente no admite at sintaxis en gradientes radiales. Pero podemos reconfigurar un poco el gradiente para superar esto:

.loader,
.loader:before,
.loader:after {
  background:
    radial-gradient(
      circle closest-side,
      currentColor 90%,
      #0000 98%
    ) 
    50% -150%/20% 80% repeat-y,
    radial-gradient(
      circle closest-side,
      currentColor 90%,
      #0000 98%
    ) 
    -150% 50%/80% 20% repeat-x;
}

Más ejemplos de cargadores

Aquí hay otra idea para un cargador giratorio similar al anterior.

Para este, solo confío en background y mask para crear la forma (no se necesita ningún pseudoelemento). También defino la configuración con variables CSS para poder crear muchas variaciones del mismo código, otro ejemplo de los poderes de las variables CSS. Escribí otro artículo sobre esta técnica si quieres más detalles.

Tenga en cuenta que algunos navegadores todavía dependen de un -webkit- prefijo para mask-composite con su propio conjunto de valores y no mostrará la rueda giratoria en la demostración. Aquí hay una manera de hacerlo sin mast-composite para obtener más compatibilidad con el navegador.

Tengo otro para ti:

Para este, estoy usando un background-color para controlar el color y el uso mask y mask-composite para crear la forma final:

Diferentes pasos para aplicar un maestro a un elemento en forma de círculo.

Antes de terminar, aquí hay algunos otros cargadores giratorios que hice hace un tiempo. Me baso en diferentes técnicas pero siempre uso degradados, máscaras, pseudo elementos, etc. Podría ser un buen ejercicio para comprender la lógica de todos y aprender nuevos trucos al mismo tiempo. Dicho esto, si tiene alguna pregunta sobre ellos, la sección de comentarios está a continuación.

Envolver

Mira, hay tanto que podemos hacer en CSS con nada más que un solo div, algunos gradientes, pseudo-elementos, variables. Parece que hemos creado un montón de diferentes cargadores giratorios, pero todos son básicamente lo mismo con ligeras modificaciones.

Este es solo el comienzo. En esta serie, veremos ideas y conceptos más avanzados para crear cargadores CSS.

Serie de cargadores de un solo elemento:

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

Si quieres conocer otros artículos parecidos a Revistas de un solo elemento: The Spinner | 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