Infini avec traînée

Un trait lumineux en dégradé parcourt sans fin le symbole de l'infini.

Réglages

Couleur principale#f43f5e

Couleur secondaire#f59e0b

Taille16px

Vitesse1x

Code

index.html

<div class="uv-lif" role="status"><span class="sr">Chargement</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 pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Loaders

Voir tout : Loaders

Spinner circulaire

LoadersReact + Motion

Points qui rebondissent

LoadersReact + Motion

Barre de progression indéterminée

LoadersReact + Motion

Skeleton de carte

LoadersReact + Motion

Carré qui devient cercle

LoadersHTML + CSS

Carrés qui changent de place

LoadersHTML + CSS

Cube 3D

LoadersHTML + CSS

Triangle qui se dessine

LoadersHTML + CSS

Où l’utiliser

Le signe infini convient à toutes les boucles : synchronisation, streaming, abonnements ou déploiements continus. Le contour discret du symbole reste fixe pendant qu'une courte traînée en dégradé, avec une lueur douce, le parcourt et se croise au centre sans jamais s'arrêter. C'est un seul chemin SVG animé par décalage de tirets.

Choisis deux couleurs chaudes ou froides et règle la vitesse selon l'ambiance. Le symbole suit la taille et reste net sur tous les écrans. Rapide pour un traitement, lente pour une attente tranquille.