HTML + CSSLoaders

Carrés qui changent de place

Trois tuiles arrondies qui glissent à tour de rôle autour d’un carré, comme un petit taquin.

Réglages

Couleur principale#0071e3

Couleur secondaire#8ec5ff

Taille72px

Vitesse1x

Code

index.html

<div class="ul-grid"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></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

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

Cube 3D

LoadersHTML + CSS

Triangle qui se dessine

LoadersHTML + CSS

Anneau d’hexagones

LoadersHTML + CSS

Où l’utiliser

Voir des pièces glisser à leur place a quelque chose de satisfaisant, ce qui fait de ce loader un bon compagnon pour les outils à grilles et à tableaux : une appli kanban qui charge ses colonnes, une galerie photo qui récupère ses vignettes ou un jeu de réflexion entre deux niveaux. Du HTML et du CSS, rien de plus.

Donnez la seconde couleur à la tuile différente pour que l’œil suive son trajet. Le rythme par défaut paraît réfléchi ; trop accéléré, on dirait que les tuiles se disputent la case libre.