Gyroscope 3D

Trois anneaux tournent sur des axes différents autour d'un cœur lumineux.

Réglages

Couleur principale#14b8a6

Couleur secondaire#f97316

Taille16px

Vitesse1x

Code

index.html

<div class="uv-lgy" role="status"><span class="sr">Chargement</span><i class="r1"></i><i class="r2"></i><i class="r3"></i><i class="co"></i></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

Un gyroscope évoque l'équilibre et la précision, idéal pour la fintech, l'aérospatial, la robotique et la science. Trois anneaux concentriques tournent sur des axes inclinés différents dans une perspective 3D, se croisant devant et derrière, pendant qu'un cœur lumineux au centre respire doucement.

Les anneaux extérieur et du milieu utilisent tes deux couleurs, l'intérieur les mélange. Tout repose sur des transformations CSS 3D, fluides et légères. La vitesse règle les trois anneaux ensemble.