Cargando
HTML + CSSLoaders
Infinito con estela
Un trazo de luz con degradado recorre sin descanso el símbolo del infinito.
Ajustes
16px
1x
Código
<div class="uv-lif" role="status"><span class="sr">Cargando</span><svg viewBox="0 0 100 50" aria-hidden="true"><defs><linearGradient id="uv-lif-g" x1="0" x2="1"><stop offset="0" stop-color="var(--c1)"/><stop offset="1" stop-color="var(--c2)"/></linearGradient></defs><path class="bg" d="M50 25C60 8 92 8 92 25S60 42 50 25 8 8 8 25s32 17 42 0z"/><path class="fg" pathLength="100" d="M50 25C60 8 92 8 92 25S60 42 50 25 8 8 8 25s32 17 42 0z"/></svg></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: LoadersDónde usarlo
El símbolo del infinito encaja con cualquier bucle: sincronizar, retransmitir, suscripciones o despliegues continuos. El contorno tenue del símbolo se queda quieto mientras una estela corta de degradado con un brillo suave lo recorre, cruzándose en el centro sin pararse nunca. Es un único path SVG animado con dash offset.
Elige dos colores cálidos o fríos para la estela y ajusta la velocidad al tono: rápida para procesar, lenta para esperas tranquilas. El símbolo escala con el tamaño y se ve nítido en cualquier pantalla.