HTML + CSSLoaders

Puntos que forman una línea

Cinco puntos que se juntan en una sola línea redondeada, cambian de color y vuelven a separarse.

Ajustes

72px
1x

Código

<div class="ul-dl"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i: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.

Versión Markdown con todo el código, para asistentes de IA

Más en Loaders

Ver todos: Loaders

Dónde usarlo

Unos puntos que se unen en una línea dan sensación de cosas que se conectan, así que este loader encaja en momentos de sincronizar y vincular: emparejar un reloj inteligente con su app, conectar un datáfono desde el panel de una tienda o sincronizar notas entre dispositivos. Es ancho y plano, y cabe bien dentro de un botón.

Rinde mejor en esperas cortas de pocos segundos, donde la unión y la separación se ven una o dos veces. Elige un segundo color que suene a «conectado», como el verde o el azul de tu marca, para que la línea se lea como éxito.