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
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.