Cargadores de un solo elemento: The Spinner trucos CSS

Crear cargadores solo con CSS es una de mis tareas favoritas. Siempre es agradable ver estas animaciones interminables. Y, por supuesto, hay mucho de técnicas y enfoques para su creación - no es necesario mira más allá de CodePen para ver exactamente cuanto. Sin embargo, en este artículo veremos cómo hacer que cargar un elemento escriba la menor cantidad de código posible.

 

Haga una colección de más de 500 cargadores de div individuales y en esta serie de cuatro partes compartiré los trucos que usé para crear muchos de ellos. ¡Veremos una gran cantidad de ejemplos que muestran cómo los pequeños ajustes pueden conducir a variaciones divertidas y cuán poco código necesitamos escribir para que todo suceda!

Para este primer artículo crearemos uno de los modelos de carga más comunes: las varillas giratorias:

Aquí está el enfoque

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

Sin embargo, mi conversión 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 desglosar esto

A primera vista, el código puede parecer extraño, pero verás que es más sencillo de lo que crees. El primer paso es definir la dimensión del elemento. En nuestro caso es 150px cuadrado. podemos poner aspect-ratio que se utilizará para que el elemento permanezca cuadrado, pase lo que pase.

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

Cuando creo cargadores CSS, siempre trato de tener un valor para controlar el tamaño total. En este caso lo es width y todos los cálculos que cubrimos se referirán a este valor. Esto me permite cambiar un 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.

Luego usaremos degradados para crear bandas. ¡Esta es la parte más difícil! usemos una degradado para crear dos barras de la siguiente manera:

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

Nuestro degradado está definido por frenos de un color y dos colores. El resultado es un color sólido sin decoloración ni transiciones. El tamaño es igual a 34% ancho y 8% alto. También se coloca en el centro (50%El truco está en usar el valor de la palabra clave space - esto duplica el degradado, lo que nos da un total de dos bandas.

De especificación:

La imagen se repite tantas veces como quepa en el área de posicionamiento de fondo sin recortarse, y luego las imágenes se espacian para llenar el área.La primera y la última imagen tocan los bordes del área.

Yo uso un ancho igual a 34% lo que significa que no podemos tener más de dos rasgos (3*34% es mayor que 100%), pero con dos carriles tendremos espacios vacíos100% - 2 * 34% = 32%). Este espacio se coloca en el centro entre las dos tiras. En otras palabras, usamos el ancho para el degradado que está en medio 33% y 50% para asegurarnos de que tenemos al menos dos tiras con una pequeña distancia entre ellas. El valor space es lo que los pone bien para nosotros.

Hacemos lo mismo y hacemos un segundo degradado similar para obtener dos bandas más en la parte superior e inferior que nos dan un background valor de la propiedad 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 con una variable CSS para evitar la duplicación:

--_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 guardar el valor del color una vez, lo que facilita la actualización posterior (como hicimos con el tamaño de la carga).

Para crear las bandas restantes, toquemos .loader elemento y su ::before pseudo-elemento para obtener cuatro bandas más para un total de ocho.

.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: gridEsto nos permite confiar en la cuadrícula predeterminada. stretch alineación para hacer que el pseudoelemento cubra toda el área de su padre; de esta manera, no tiene que señalar una dimensión en él: ¡otro truco que reduce el código y nos evita tratar con muchos valores!

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

Establecer opacidad

Lo que estamos tratando de hacer es crear la impresión de que hay una banda que deja un rastro de bandas que se desvanecen a medida que viaja en círculo. Lo que necesitamos ahora es jugar con la transparencia de nuestras cintas para hacer este trace, que haremos 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 a todo color:

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

De hecho, cada banda parece desvanecerse porque está enmascarada por un degradado y cae entre dos colores translúcidos. Apenas se nota cuando funciona, por lo que es como si pudiera decir que todas las tiras tienen el mismo color con un nivel de opacidad de color diferente.

La rotación

Apliquemos una animación de rotación para obtener nuestro cargador. Tenga en cuenta que necesitamos animación escalonada, no continua, por lo que uso steps(8). 8 no es más que el número de tiras, por lo que este valor puede variar dependiendo de cuántas tiras se utilicen.

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

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

¡Está! Tenemos nuestro cargador con un solo elemento y varias líneas CSS. Podemos controlar fácilmente su tamaño y color ajustando un valor.

Porque solo usamos ::before pseudo-elemento, podemos agregar cuatro tiras más usando ::after para terminar con un total de 12 líneas y casi el mismo código:

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

También tenga en cuenta que tenemos grid-area: 1/1 sobre los pseudo-elementos. Esto nos permite colocarlos en la misma zona uno encima del otro, apilados uno encima del otro.

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

¿Puedes entender la lógica detrás del código? Aquí hay una pista: CSS ya no maneja la opacidad mask pero dentro del degradado y también usado opacity Propiedad.

¿Por qué en lugar de puntos?

Podemos hacer esto completamente:

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

A continuación se muestra una figura que ilustra la nueva configuración de gradiente:

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 carga

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

Para esto solo confío en background y mask para crear la forma (no se requieren pseudo-elementos). También defino la configuración con variables CSS para poder crear muchas variaciones del mismo código, otro ejemplo de permisos de variables CSS solamente. 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í está cómo hacerlo sin que mast-composite para obtener más compatibilidad con el navegador.

Tengo otro para ti:

Para esto uso un background-color para controlar el color y el uso mask y mask-composite para crear la forma final:

Antes de terminar, aquí hay algunos cargadores rotativos más que hice hace algún tiempo. Me baso en diferentes técnicas, pero sigo usando degradados, máscaras, pseudo-elementos, etc. Puede ser un buen ejercicio para entender la lógica de cada uno y aprender nuevos trucos al mismo tiempo. Esto significa que si tiene alguna pregunta sobre ellos, la sección de comentarios está más abajo.

resumiendo

Verá, hay tanto que podemos hacer en CSS con nada más que un 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 modificaciones menores.

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