HTML + CSSLoaders

Anillos concéntricos

Tres arcos anidados que giran a distinta velocidad, con el del medio en sentido contrario.

Ajustes

72px
1x

Código

<div class="ul-orb"><i></i><i></i><i></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

Tres anillos girando cada uno a su ritmo dan sensación de trabajo complejo en marcha, como engranajes o planetas. Por eso este loader encaja en un blog de astronomía, en el paso de análisis de una herramienta de datos o en una función de IA que tarda unos segundos en responder. CSS puro, escala a cualquier tamaño.

Como los arcos se cruzan, luce en tamaños medianos y grandes y se vuelve un lío si es diminuto. Dale el segundo color al anillo del medio; el contraste hace que se vea bien el giro contrario.