CSS no deja de sorprender. Con un solo elemento puedes crear spinners, puntos, barras y hasta cargadores 3D. En este artículo final de la serie Cargadores de un solo elemento exploramos cómo simular cubos en 3D usando solo gradientes CSS, pseudoelementos y un poco de diseño matemático.
El cargador Split Cube funciona mostrando tres caras de un cubo en lugar de las seis. Con un elemento HTML y sus pseudos ::before y ::after se crean dos mitades que se solapan y parecen un único cubo. La idea clave es: conic-gradient para dar la ilusión de profundidad, clip-path para definir las caras poligonales, márgenes negativos para unir las mitades y una animación keyframes para el rebote. Ejemplo esquemático de estilos en CSS para entender la técnica
.loader{--s:150px;--_d:calc(0.353*var(--s));width:calc(var(--s)+var(--_d));aspect-ratio:1;display:flex}.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));animation:load 1.5s infinite cubic-bezier(0,.5,.5,1.8) alternate}.loader::before{margin-right:calc(var(--_d)/-2)}.loader::after{margin-left:calc(var(--_d)/-2);animation-delay:-.75s}@keyframes load{0%,40%{transform:translateY(calc(var(--s)/-4))}60%,100%{transform:translateY(calc(var(--s)/4))}}El resultado es un cargador que rebota y sugiere un espacio tridimensional, todo a partir de un único elemento.
El cargador Progress Cube adapta la misma estructura para funcionar como indicador de progreso. Los ajustes principales son usar opacidad en la mitad derecha para simular profundidad, aplicar un blend para generar tres tonos a partir de un color y animar el ancho de la mitad izquierda para que el cubo se rellene como una barra. Un degradado inferior completa la base del cubo.
.loader{--s:100px;--_d:calc(0.353*var(--s));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;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:.4}@keyframes load{0%,5%{width:var(--_d)}95%,100%{width:100%}}Así el cubo se rellena como una barra manteniendo la ilusión 3D.
Si un cubo no es suficiente, CSS permite generar patrones completos y rejillas de cubos con un solo elemento: variables CSS para controlar tamaño, filas, columnas y separación; un conic-gradient para las caras; y una máscara para recortar las formas. Animaciones como desplazamientos o parpadeos activan el patrón. Quieres una rejilla 10x10 solo cambia las variables --m y --n.
Con los mismos bloques - pseudoelementos, gradientes, clip-path, blend y variables - puedes crear variaciones que rebotan en 3D, se rellenan como barras de progreso, deslizan de forma infinita o parpadean colores en secuencia. Las posibilidades son casi infinitas y mantienen la ventaja de requerir un solo elemento HTML.
En Q2BSTUDIO aplicamos este tipo de soluciones visuales y optimizadas en proyectos reales. Somos una empresa de desarrollo de software y aplicaciones a medida especializada en inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y automatización. Si buscas crear una interfaz atractiva para una app o portal con componentes CSS eficientes, podemos desarrollar el diseño y la integración, desde el front hasta la lógica de negocio.
Ofrecemos desarrollo de aplicaciones a medida y software a medida, implementación de inteligencia artificial para empresas, agentes IA y soluciones de power bi, además de servicios de ciberseguridad y pentesting para proteger tus activos. También desplegamos infraestructuras en servicios cloud aws y azure y trabajamos soluciones de inteligencia de negocio para convertir datos en decisiones.
Si te interesa que implementemos cargadores 3D optimizados, componentes reutilizables para tus aplicaciones o integrar inteligencia artificial y dashboards con power bi, contacta con Q2BSTUDIO y te ayudamos a diseñar e implementar la solución a medida que mejor encaje con tus objetivos.
Conclusión: desde un sencillo spinner hasta ilusiones 3D complejas, los cargadores de un solo elemento demuestran la potencia de CSS. Con poco marcado puedes obtener resultados visuales, escalables y reutilizables, sin JavaScript a menos que quieras añadir interactividad avanzada.