HTML + CSSLoaders
Cuadrado que se vuelve círculo
Un cuadrado que gira, se encoge hasta ser un círculo, cambia de color y vuelve a empezar.
Ajustes
72px
1x
Código
<div class="ul-morph"></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
Esta forma que se transforma tiene un aire lúdico y muy de diseño, por eso encaja en webs creativas: la entrada de un estudio de diseño, la pantalla de carga de un portfolio o una transición entre páginas en la web de un estudio de arquitectura. Es un loader CSS puro, un único elemento sin JavaScript.
Elige dos colores cercanos, como dos azules o un coral y un rosa, para que el cambio se lea como un matiz y no como un destello. Pide algo de tamaño; por debajo de 30 píxeles el giro parece un tic.