Cargando
HTML + CSSLoaders
Infinity trail loader
A bright gradient stroke races endlessly around the infinity symbol.
Settings
16px
1x
Code
<div class="uv-lif" role="status"><span class="sr">Loading</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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Loaders
See all LoadersWhere to use it
The infinity sign suits loops of all kinds: syncing, streaming, subscriptions or continuous deployments. A faint outline of the symbol stays in place while a short gradient trail with a soft glow travels along it, crossing in the center without ever stopping. It is a single SVG path animated with a dash offset.
Pick two warm or cool colors for the trail and adjust speed to match the mood, fast for processing, slow for ambient waiting. The symbol scales with the size control and stays sharp on any screen.