HTML + CSSLoaders

Anillo de 12 puntos

Doce puntos colocados como las horas de un reloj que se apagan y encogen uno tras otro al pasar la luz.

Ajustes

72px
1x

Código

<div class="ul-dr"><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><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i><i style="--i:10"></i><i style="--i:11"></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

Con sus doce puntos colocados como las horas de una esfera, este loader tiene algo paciente, de tictac. Encaja en momentos de comprobar y contar: el widget de reservas de un restaurante buscando mesas libres, un calendario cargando disponibilidad o una galería procesando las fotos que acabas de subir. HTML y CSS puros, y muy ligero.

Como los puntos se encogen al apagarse, resulta más aireado que un spinner de barras y va bien en diseños delicados y minimalistas. Usa el color del texto para una versión discreta, o tu color de acento si está solo en medio de un panel vacío.