HTML + CSSLoaders

Cuadrados que cambian de sitio

Tres piezas redondeadas que se turnan para deslizarse por un cuadrado, como un pequeño puzle.

Ajustes

72px
1x

Código

<div class="ul-grid"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Más en Loaders

Dónde usarlo

Ver piezas que encajan en su sitio tiene algo satisfactorio, y por eso este loader combina bien con herramientas de tableros y rejillas: una app kanban cargando sus columnas, una galería de fotos trayendo miniaturas o un juego de puzles entre niveles. Es HTML y CSS sin más, tres bloques y unas pocas líneas de estilo.

Usa el segundo color en la pieza distinta para que la vista pueda seguir su recorrido. El ritmo por defecto se siente pausado; si lo aceleras demasiado, parece que las piezas se pelean por el hueco.