Cargadores de un solo elemento: el Spinner

Hacer cargadores solo de CSS es una de mis tareas favoritas. Siempre es satisfactorio mirar esas infinitas animaciones. Y, por supuesto, hay un montón de técnicas y enfoques para hacerlos, sin necesidad de mira más allá de CodePen para ver cuantos. 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 hizo una colección de más de 500 cargadores div individuales y en esta serie de cuatro partes, voy a compartir los trucos que usé para crear muchos de ellos. Cubriremos una gran cantidad de 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!

Para este primer artículo, vamos a crear uno de los patrones de carga más comunes: barras giratorias:

Aquí está el enfoque

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

Sin embargo, mi implementació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 romper eso

A primera vista, el código puede parecer extraño, pero verás que es más simple de lo que piensas. El primer paso es definir la dimensión del elemento. En nuestro caso, es un 150px cuadrado. podemos poner aspect-ratio para usar para que el elemento se mantenga 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 ese 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 necesidad de ajustar muchos valores adicionales.

A continuación, usaremos degradados para crear las barras. ¡Esta es la parte más complicada! usemos una degradado para crear dos barras como la siguiente:

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

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

Desde la especificación:

La imagen se repite tantas veces como quepa dentro del á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.

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

Hacemos lo mismo y hacemos un segundo degradado similar para obtener dos barras más en la parte superior e inferior, que nos dan una 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 eso 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;

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

Para crear las barras restantes, toquemos el .loader elemento y su ::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);
}

Tenga en cuenta el uso de display: grid. Esto nos permite confiar en el valor predeterminado de la red. stretch alineación para hacer que el pseudoelemento cubra toda el área de su padre; por lo tanto, no hay necesidad de especificar 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:

Configuración de la 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 a medida que recorre una trayectoria circular. Lo que necesitamos ahora es jugar con la transparencia de nuestras barras para hacer ese rastro, lo cual 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 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 las barras con diferente opacidad:

En realidad, cada barra parece desvanecerse porque está enmascarada por un degradado y cae entre dos colores semitransparentes. Apenas se nota cuando se ejecuta, por lo que es como poder decir que todas las barras tienen el 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 escalonada y no continua, por eso estoy usando steps(8). 8 no es más que el número de barras, por lo que ese valor se puede cambiar dependiendo de cuántas barras estén en uso.

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

¡Eso es todo! 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 compases 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 sobre los pseudo-elementos. Esto nos permite colocarlos en la misma área uno del otro, apilados uno encima del otro.

¿Adivina qué? Podemos alcanzar el mismo cargador usando otra implementación:

¿Puedes descifrar la lógica detrás del código? Aquí hay una pista: la opacidad ya no se maneja con un CSS mask pero dentro del gradiente y también está usando el opacity propiedad.

¿Por qué no puntos en su lugar?

Totalmente podemos hacer eso:

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:

Si está utilizando Safari, tenga en cuenta que la demostración puede tener errores. Eso es porque Safari actualmente carece de soporte para el at sintaxis en gradientes radiales. Pero podemos reconfigurar un poco el gradiente para superar eso:

.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 necesitan pseudo-elementos). También estoy definiendo 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 utilizar mask y mask-composite para crear la forma final:

Antes de terminar, aquí hay algunos cargadores giratorios más que hice hace un tiempo. Me baso en diferentes técnicas, pero sigo usando degradados, máscaras, pseudoelementos, etc. Podría ser un buen ejercicio para descubrir la lógica de cada uno y aprender nuevos trucos al mismo tiempo. Dicho esto, si tiene alguna pregunta sobre ellos, la sección de comentarios está abajo.

Terminando

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

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

---

Cargadores de un solo elemento: el Spinner 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-spinner/