Baldosas que voltean

Nueve baldosas giran en 3D en una ola diagonal y cambian de color al darse la vuelta.

Ajustes

Color principal#0ea5e9

Color secundario#a855f7

Tamaño16px

Velocidad1x

Código

index.html

<div class="uv-lft" role="status"><span class="sr">Cargando</span><i style="--d:0"></i><i style="--d:1"></i><i style="--d:2"></i><i style="--d:1"></i><i style="--d:2"></i><i style="--d:3"></i><i style="--d:2"></i><i style="--d:3"></i><i style="--d:4"></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

Ver todos: Loaders

Spinner circular

LoadersReact + Motion

Puntos rebotando

LoadersReact + Motion

Barra de progreso indeterminada

LoadersReact + Motion

Skeleton de tarjeta

LoadersReact + Motion

Cuadrado que se vuelve círculo

LoadersHTML + CSS

Cuadrados que cambian de sitio

LoadersHTML + CSS

Cubo 3D

LoadersHTML + CSS

Triángulo que se dibuja

LoadersHTML + CSS

Dónde usarlo

Una rejilla de baldosas se lee como construir, montar o generar, por eso encaja en paneles, herramientas de diseño y generadores de imágenes. Cada baldosa gira sobre su eje vertical con perspectiva 3D, la ola avanza en diagonal desde la esquina superior izquierda y las baldosas pasan al segundo color en su cara trasera antes de volver.

Son nueve elementos y un solo keyframe con retrasos escalonados, así que pesa poco incluso en el móvil. Cambia los colores por los de tu marca y la velocidad para una ola tranquila o enérgica.