Cargadores individuales: ¡hacia 3D! | trucos CSS

En este cuarto y último artículo de nuestra pequeña serie sobre cargadores de un solo elemento, exploraremos los modelos 3D. Al crear un elemento 3D, es difícil imaginar que un solo elemento HTML sea suficiente para simular algo así como las seis caras de un cubo. .Pero tal vez podamos salirnos con la nuestra con algo más cúbico-me gusta en cambio, al mostrar solo los tres lados frontales de la forma, esto es completamente posible y esto es lo que haremos juntos.

El cargador de cubos divididos

Aquí hay una carga en 3D donde el cubo se divide en dos partes, pero está hecho con un solo elemento:

Cada mitad del cubo se hace usando un pseudo-elemento:

Genial, ¿verdad? Podemos usar un degradado cónico con CSS clip-path del elemento ::before y ::after pseudo para simular las tres caras visibles de un cubo 3D. El margen negativo es lo que une los dos pseudos para superponerse y simular un cubo completo. ¡El resto de nuestro trabajo consiste principalmente en animar estas dos mitades para obtener cargadores atractivos!

Echemos un vistazo a una imagen que explica las matemáticas detrás de los puntos de ruta de recorte utilizados para crear este elemento con forma de cubo:

Tenemos nuestras variables y ecuación, así que pongámoslas a trabajar. Primero configuraremos nuestras variables y estableceremos el tamaño para el principal .loader elemento:

.loader {
  --s: 150px; /* control the size */
  --_d: calc(0.353 * var(--s)); /* 0.353 = sin(45deg)/2 */

  width: calc(var(--s) + var(--_d)); 
  aspect-ratio: 1;
  display: flex;
}

Nada demasiado loco hasta ahora. Tenemos 150px cuadrado que se configura como un contenedor flexible. Ahora establecemos nuestro pseudo:

.loader::before,
.loader::after {
  content: "";
  flex: 1;
}

Son dos mitades en .loader Tenemos que pintarlos, así que aquí es donde está el nuestro. gradiente cónico entra:

.loader::before,
.loader::after {
  content: "";
  flex: 1;
  background:
    conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d),
    #fff 135deg, #666 0 270deg, #aaa 0);
}

El gradiente está ahí, pero parece extrañoNecesitamos cortarlo al elemento:

.loader::before,
.loader::after {
  content: "";
  flex: 1;
  background:
    conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d),
    #fff 135deg, #666 0 270deg, #aaa 0);
  clip-path:
    polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}

Asegurémonos de que las dos mitades se superpongan con un margen negativo:

.loader::before {
  margin-right: calc(var(--_d) / -2);
}

.loader::after {
  margin-left: calc(var(--_d) / -2);
}

¡Ahora vamos a ponerlos en movimiento!

.loader::before,
.loader::after {
  /* same as before */
  animation: load 1.5s infinite cubic-bezier(0, .5, .5, 1.8) alternate;
}

.loader::after {
  /* same as before */
  animation-delay: -.75s
}

@keyframes load{
  0%, 40%   { transform: translateY(calc(var(--s) / -4)) }
  60%, 100% { transform: translateY(calc(var(--s) / 4)) }
}

Aquí está la demostración final una vez más:

El cargador de cubos de progreso

Usemos la misma técnica para crear un cargador de progreso 3D. Sí, todavía sólo un artículo!

No cambiamos nada en términos de simular el cubo de la misma manera que lo hicimos antes, aparte de cambiar la altura y la relación de aspecto del cargador. La animación que hacemos se basa en una técnica sorprendentemente fácil en la que actualizamos el ancho del lado izquierdo mientras que el lado derecho llena el espacio restante, gracias a flex-grow: 1.

El primer paso es agregar algo de transparencia al lado derecho usando opacity:

Esto simula el efecto de llenar un lado del cubo mientras el otro está vacío. A continuación, actualizamos el color en el lado izquierdo. Para hacer esto, actualizamos los tres colores dentro del degradado cónico, o lo hacemos agregando un color de fondo con un background-blend-mode:

.loader::before {
  background-color: #CC333F; /* control the color here */
  background-blend-mode: multiply;
}

Este truco nos permite actualizar el color solo una vez. El lado derecho de la herramienta Cargar se fusiona con los tres tonos de blanco del degradado cónico para crear tres nuevos tonos de nuestro color, aunque solo estemos usando un valor de color. Fraude de color!

Vamos a animar el ancho del lado izquierdo del cargador:

¡Ahora, la animación es un poco extraña al principio! ¿Observe cómo comienza fuera del cubo? Esto se debe a que comenzamos la animación desde 0% ancho. Pero debido a clip-path y el margen negativo que usamos, lo que debemos hacer en su lugar es comenzar desde nuestro --_d variable que usamos para definir clip-path puntos y el margen negativo:

@keyframes load {
  0%,
  5% {width: var(--_d); }
  95%,
  100% {width: 100%; }
}

Esto es un poco mejor:

Pero podemos hacer que esta animación sea aún más fluida. ¿Notaste que nos falta algo? Déjame mostrarte una captura de pantalla para comparar cómo debería verse la demostración final con la última demostración:

¡Esta es la parte inferior del cubo! Dado que el segundo elemento es transparente, necesitamos ver el lado inferior de este rectángulo, como puede ver en el ejemplo de la izquierda. Es sutil, ¡pero tiene que estar ahí!

Podemos agregar un degradado al elemento principal y recortarlo como hicimos con los alias:

background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat;

Aquí está el código completo después de que todo esté listo:

.loader {
  --s: 100px; /* control the size */
  --_d: calc(0.353*var(--s)); /* 0.353 = sin(45deg) / 2 */

  height: var(--s); 
  aspect-ratio: 3;
  display: flex;
  background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat;
  clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}
.loader::before,
.loader::after {
  content: "";
  clip-path: inherit;
  background:
    conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d),
     #fff 135deg, #666 0 270deg, #aaa 0);
}
.loader::before {
  background-color: #CC333F; /* control the color here */
  background-blend-mode: multiply;
  margin-right: calc(var(--_d) / -2);
  animation: load 2.5s infinite linear;
}
.loader:after {
  flex: 1;
  margin-left: calc(var(--_d) / -2);
  opacity: 0.4;
}

@keyframes load {
  0%,
  5% { width: var(--_d); }
  95%,
  100% { width: 100%; }
}

¡Está! Acabamos de utilizar una técnica inteligente que utiliza pseudoelementos, degradados ahusados, recortes, combinación de fondo y márgenes negativos para obtener no uno, sino dos Cargadores 3D de aspecto lindo con nada más que un solo elemento en el marcado.

Más 3D

Todavía podemos ir más allá y simular una cantidad infinita de cubos 3D usando un solo elemento, ¡sí, es posible! Aquí hay una cuadrícula de cubos:

Esta demostración y las siguientes demostraciones no son compatibles con Safari en el momento de escribir este artículo.

loco, ¿verdad? Ahora creamos un patrón repetitivo de cubos hechos con un solo elemento... ¡y sin pseudo tampoco! No entraré en los detalles esenciales de las matemáticas que estamos usando (hay muchos números específicos allí), pero aquí hay una figura que visualiza cómo llegamos a aquí:

Primero usamos un conic-gradient para crear un patrón de cubo repetitivo. La repetición del patrón está controlada por tres variables:

• --size: Fiel a su nombre, esto controla el tamaño de cada cubo.
• --m: Esto representa el número de columnas.
• --n: Este es el número de filas.
• --gap: este es el espacio o distancia entre los cubos

.cube {
  --size: 40px; 
  --m: 4; 
  --n: 5;
  --gap :10px;

  aspect-ratio: var(--m) / var(--n);
  width: calc(var(--m) * (1.353 * var(--size) + var(--gap)));
  background:
    conic-gradient(from -90deg at var(--size) calc(0.353 * var(--size)),
      #249FAB 135deg, #81C5A3 0 270deg, #26609D 0) /* update the colors here */
    0 0 / calc(100% / var(--m)) calc(100% / var(--n));
}

Luego aplicamos una capa de enmascaramiento usando otra plantilla del mismo tamaño. Esta es la parte más complicada de esta idea. Usando una combinación de linear-gradient y un conic-gradient Recortaremos varias partes de nuestro elemento para mantener visibles solo las formas de cubo.

.cube {
  /* etc. */
  mask: 
    linear-gradient(to bottom right,
       #0000 calc(0.25 * var(--size)),
       #000 0 calc(100% - calc(0.25 * var(--size)) - 1.414 * var(--gap)),
       #0000 0),
    conic-gradient(from -90deg at right var(--gap) bottom var(--gap), #000 90deg, #0000 0);  
  mask-size: calc(100% / var(--m)) calc(100% / var(--n));
  mask-composite: intersect;
}

El código puede parecer un poco complicado, pero gracias a las variables CSS, todo lo que necesitamos hacer es actualizar algunos valores para controlar nuestra matriz de cubo. ¿Necesita una cuadrícula de 10⨉10? Actualizar --m y --n variables a 10¿Necesita un espacio más amplio entre los cubos? Actualizar --gap Los valores de color solo se usan una vez, ¡así que actualícelos para una nueva paleta de colores!

Ahora que tenemos otra técnica 3D a nuestra disposición, usémosla para crear variaciones del cargador jugando con diferentes animaciones. Por ejemplo, ¿qué tal un patrón repetitivo de cubos que se deslizan sin cesar de izquierda a derecha?

Esta carga define cuatro cubos en una fila. significa nuestro --n el valor es 4 y --m es igual a 1 En otras palabras, ¡ya no los necesitamos!

En su lugar, podemos trabajar con --size y --gap variables en un contenedor de red:

.loader {
  --size: 70px;
  --gap: 15px;  

  width: calc(3 * (1.353 * var(--size) + var(--gap)));
  display: grid;
  aspect-ratio: 3;
}

Este es nuestro contenedor. Tenemos cuatro cubos, pero solo queremos mostrar tres en el contenedor a la vez, por lo que siempre tenemos uno deslizándose hacia adentro mientras que el otro se desliza hacia afuera. Por eso contamos el ancho de 3 y la relación de aspecto se establece en 3 también.

Asegurémonos de que nuestra plantilla de cubo tenga el ancho de cuatro cubos. Haremos esto en la plantilla del contenedor. ::before pseudo elemento:

.loader::before { 
  content: "";
  width: calc(4 * 100% / 3);
  /*
     Code to create four cubes
  */
}

Ahora que tenemos cuatro cubos en un contenedor de tres cubos, podemos alinear la plantilla de cubo al final del contenedor de cuadrícula para desbordarlo, mostrando los últimos tres cubos:

.loader {
  /* same as before */
  justify-content: end;
}

Esto es lo que tenemos hasta ahora, con un contorno rojo para mostrar los límites del contenedor de red:

Ahora todo lo que tenemos que hacer es mover el pseudo-elemento a la derecha agregando nuestra animación:

@keyframes load {
  to { transform: translate(calc(100% / 4)); }
}

¿Conseguiste el truco de la animación? Terminemos esto ocultando el patrón de cubo degradado y agregando un poco de máscara para crear ese efecto de aparición gradual que comienza y termina:

.loader {
  --size: 70px;
  --gap: 15px;  
  
  width: calc(3*(1.353*var(--s) + var(--g)));
  display: grid;
  justify-items: end;
  aspect-ratio: 3;
  overflow: hidden;
  mask: linear-gradient(90deg, #0000, #000 30px calc(100% - 30px), #0000);
}

Podemos hacer esto mucho más flexible introduciendo una variable, --npara establecer cuántos cubos mostrar en el contenedor a la vez. Y dado que el número total de cubos en el patrón debe ser uno más que --npodemos expresar esto como calc(var(--n) + 1).

Aquí está todo:

Ok, otro cargador 3D que es similar, pero los cubos cambian de color secuencialmente en lugar de deslizarse:

Nos basaremos en un fondo animado con background-blend-mode Para este:

.loader {
  /* ... */
  background:
    linear-gradient(#ff1818 0 0) 0% / calc(100% / 3) 100% no-repeat,
    /* ... */;
  background-blend-mode: multiply;
  /* ... */
  animation: load steps(3) 1.5s infinite;
}
@keyframes load {
  to { background-position: 150%; }
}

Eliminé el código redundante utilizado para crear el mismo diseño que el último ejemplo, pero con tres cubos en lugar de 4. Lo que estoy agregando aquí es un degradado definido con un color específico que se fusiona con el degradado cónico, al igual que nosotros. hizo anteriormente para la barra de progreso de carga 3D.

A partir de ahí, anima el degradado de fondo. background-position como una animación de tres pasos para hacer que los cubos parpadeen de colores uno por uno.

Si no está familiarizado con los valores que estoy usando para background-position y la sintaxis de fondo, recomiendo uno de mis artículos anteriores y uno de los mi desbordamiento de pila respondióAllí encontrarás una explicación muy detallada.

¿Podemos actualizar el número de cubos para hacerlo variable?

Sí tengo solución para estopero me gustaría que lo probaras en lugar de incrustarlo aquí. Tome lo que aprendimos del ejemplo anterior e intente hacer lo mismo con este, ¡luego comparta su trabajo en los comentarios!

¡Muchas variaciones!

Al igual que los otros tres artículos de esta serie, me gustaría dejarles algo de inspiración para seguir adelante y crear sus propios gestores de arranque. Esta es una colección que incluye los cargadores 3D que creamos juntos, además de algunos otros para que dejes volar tu imaginación:

es un paquete

Realmente espero que hayan disfrutado de pasar tiempo haciendo cargadores de elementos individuales conmigo durante las últimas semanas. Es una locura que empezáramos con una ruleta aparentemente simple y luego gradualmente agregáramos nuevas partes para trabajar por nuestra cuenta hasta llegar a técnicas 3D que todavía usan solo un elemento en el marcado. Así es exactamente como se ve CSS cuando usamos sus capacidades: escalable, flexible y reutilizable.

¡Gracias de nuevo por leer esta pequeña serie! Terminaré recordándote que tengo colección de más de 500 cargadores si buscas más ideas y inspiración.