Pendule de Newton

Cinq billes suspendues dont la première et la dernière se balancent à tour de rôle.

Réglages

Couleur principale#64748b

Couleur secondaire#e2e8f0

Taille16px

Vitesse1x

Code

index.html

<div class="uv-lnc" role="status"><span class="sr">Chargement</span><span class="bar"></span><span class="p"><i></i></span><span class="p"><i></i></span><span class="p"><i></i></span><span class="p"><i></i></span><span class="p"><i></i></span></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 jouet de bureau que tout le monde reconnaît fait un loader calme et satisfaisant pour les outils financiers, les cours de physique, les applis de productivité et les tableaux de bord. Une barre tient cinq fils avec des billes brillantes ; les billes extérieures s'écartent et reviennent à tour de rôle avec une courbe qui imite l'élan, celles du milieu restent immobiles.

Les billes ont un dégradé radial métallique fait de tes deux couleurs. La vitesse change le rythme du balancement. Tout repose sur de simples transformations CSS, fluides sur n'importe quel appareil.