React + MotionLoaders

Spinner circulaire

Le spinner en anneau classique, dont vous réglez la couleur, la taille et la vitesse, du bouton à la page entière.

Réglages

48px
1s

Code

interface SpinnerProps {
  color?: string;
  size?: number;
  /** Segundos por vuelta. */
  speed?: number;
}

export default function Spinner({
  color = "#0071e3",
  size = 48,
  speed = 1,
}: SpinnerProps) {
  return (
    <div
      role="status"
      aria-label="Chargement"
      className="animate-spin rounded-full border-transparent"
      style={{
        width: size,
        height: size,
        borderWidth: Math.max(2, size / 10),
        borderColor: `${color}33`,
        borderTopColor: color,
        animationDuration: `${speed}s`,
      }}
    />
  );
}

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

Où l’utiliser

Parfois, le bon vieux spinner de chargement est exactement ce qu’il faut : dans le bouton « Envoyer » pendant l’envoi d’un formulaire de contact, à côté d’un champ de recherche qui attend ses résultats ou au milieu d’un tableau encore vide. Tout le monde le comprend et il prend très peu de place.

Donnez-lui la couleur de votre marque et gardez-le petit dans les boutons, autour de 16 à 20 pixels. Si l’attente dépasse souvent trois ou quatre secondes, une barre de progression ou un skeleton en disent plus sur ce qui arrive.