Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Un loader hecho solo con CSS: cinco cuadrados negros sobre blanco (o blancos sobre negro) cumplen un ciclo de 2,1 segundos. Cada uno se aplasta, despega estirado, sube, cae estirado, aterriza aplastado y rebota un poco; los saltos son cada vez más altos y el último, en naranja vivo, cierra la ola. Cada cuadrado lleva su sombra, que se estrecha al subir. Los keyframes los genera un pequeño script, así que cambiar la cantidad, el tamaño o la duración es cambiar un número. La demo lo enseña como loader de página con cortina y porcentaje, como mini loader dentro de botones con check que se dibuja y como laboratorio con deslizadores. Ideal para preloaders de portfolios, estados de carga de formularios y webs de producto.
Encaja bien en webs de
- Prompt
- ≈5.606 tokens · con Lite
- Librerías
- ninguna
- Demo
- 24,6 KB · ligero
- Prueba en frío
- pendiente
Antes de copiar
Tu marca, dentro del prompt
Cambia lo que quieras y copia: el prompt sale ya con el nombre, los colores y los textos de tu cliente. Lo que dejes en blanco se queda como en la demo.
Mete tu marca y tus colores en el prompt
Con Pro o con tu llave de regalo. Esto es lo que puedes cambiar:
- Nombre de la marca
- Palabra junto al porcentaje
- Color vivo del último cuadrado
- Color negro
- Color blanco
Índice del prompt
Qué hay dentro del prompt
Qué trae el prompt, por apartados
- 01Qué es
- 02Librerías y esqueleto
- 03Tokens de diseño
- 04Estructura y contenido
- 05Movimiento
- 06Código clave
- 07Interacción
- 08Adaptación a móvil y tablet
- 09Accesibilidad y movimiento reducido
- 10Rendimiento
- 11Personalización
- 12Comprobación final
- Completo
- 2.778 palabras · ≈5.606 tokens
- Lite
- 989 palabras · ≈1.910 tokens
- Librerías
- ninguna
- Peso de la demo
- 24,6 KB (ligero)
- Resolución máxima (DPR)
- 2
- Se pausa fuera de pantalla
- sí
- Respeta «menos movimiento»
- sí
Tokens estimados para español (≈3,6 caracteres por token): sirven para orientarte, no son exactos.
prompt.md Pro
El prompt está en Pro
2.778 palabras en el Completo y 989 en el Lite. El prompt real solo sale del servidor cuando tienes acceso.
Prueba en frío
La prueba en frío
Aún sin publicar para esta pieza
En la prueba en frío pegamos el prompt en Claude Sonnet 5.5, sin ayuda ni contexto, y comparamos lo que genera con la demo. Cuando esté hecha, aquí verás la captura, el veredicto y la fecha.
Paso a paso
Cómo usarlo en 4 pasos
- 01
Personaliza
Rellena el formulario de arriba con el nombre, los colores y los textos de tu cliente. Se meten en el prompt al copiar. - 02
Copia el Completo o el Lite
El Completo, para Claude, ChatGPT, Gemini o Cursor. El Lite, más corto, para Lovable, Bolt o v0, que aceptan menos texto. - 03
Pega e itera
Pégalo en una conversación nueva. Si quieres cambiar algo, pídelo con una frase corta:- «Cambia el naranja por un verde ácido»
- «Pasa a siete cuadrados y alarga el ciclo a 3 segundos»
- «Que todos los cuadrados sean del mismo color, sin el último destacado»
- «Usa el loader como cortina de carga a pantalla completa de toda la web»
- 04
Publica
Guarda el resultado como HTML (o en tu proyecto) y súbelo a Vercel, Netlify o tu hosting de siempre. Tienes los pasos en la guía.
Licencia en claro
Qué puedes hacer con esta pieza
Todas las piezas incluyen licencia de uso comercial. Usa el resultado tal cual en tus productos, encargos freelance o webs de clientes, sin atribución.
Puedes
- Usarlo en tus webs y en las de tus clientes, también si cobras por ellas.
- Cambiarlo todo lo que quieras.
- Publicar el resultado sin citarnos.
No puedes
- Revender o regalar el prompt, la demo o el código como plantilla o biblioteca.
- Compartir tu cuenta Pro.
Es la misma licencia para lo gratis y lo Pro. La tienes entera en licencia de uso.
Preguntas frecuentes
Lo que suele preguntarse
¿Cómo lo uso como loader de toda la web?
Pon el loader en una cortina fija a pantalla completa y, cuando se dispare el evento load de la ventana, añade la clase que abre el clip-path hacia arriba. El código de la maqueta de la demo hace exactamente eso con un porcentaje simulado.
¿Puedo cambiar el número de cuadrados?
Sí, con el atributo data-n de cada contenedor. El script genera los keyframes de cada cuadrado con el escalonado y la altura de salto repartidos según la cantidad, de 3 a 7 funciona bien.
¿Cómo lo meto dentro de un botón sin que cambie de ancho?
Etiqueta, check y mini loader comparten la misma celda de una rejilla, y solo se alterna su opacidad. Así el botón conserva el ancho de la etiqueta. Usa --s: 5px para el loader y pon aria-busy mientras carga.
¿Qué pasa con movimiento reducido?
Los cuadrados dejan de saltar y se quedan quietos formando una escalera, con el último en color vivo, que sigue siendo legible como indicador de carga. Los porcentajes y las transiciones se simplifican.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈5606 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈1910 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 01-10-2026
