Function Spinner

Composant Spinner - Indicateur de chargement universel AdminJO

Ce composant fournit un indicateur de chargement animé complet et polyvalent pour l'application AdminJO des Jeux Olympiques 2024. Il combine animation CSS fluide, multiples variations de taille et couleur, support texte accompagnateur optionnel, et modes d'affichage inline ou plein écran. Conçu pour tous les cas d'usage de feedback utilisateur pendant les opérations asynchrones, il maintient la cohérence visuelle de l'écosystème AdminJO tout en offrant une flexibilité maximale pour s'adapter aux contextes d'attente variés de l'administration olympique.

Architecture animation et variations visuelles

Système de tailles graduées et contextuelles

• Small (4x4) : w-4 h-4 pour indicateurs inline compacts
• Medium (6x6) : w-6 h-6 taille standard boutons et cards
• Large (8x8) : w-8 h-8 pour sections importantes et modales
• XLarge (12x12) : w-12 h-12 chargements plein écran critiques
• Proportions cohérentes : Échelle géométrique design system
• Context adaptation : Tailles optimisées selon usage prévu
• Responsive scaling : Adaptabilité mobile ↔ desktop automatique
• Visual hierarchy : Tailles communiquent importance opération

Palette couleurs thématique AdminJO enrichie

• Blue (défaut) : text-blue-600 couleur principale AdminJO
• White : text-white pour overlays et backgrounds sombres
• Gray : text-gray-500 pour états neutres et désactivés
• Green : text-green-600 pour succès et validation en cours
• Red : text-red-600 pour erreurs et opérations critiques
• Yellow : text-yellow-600 pour avertissements et attention
• Cohérence branding : Alignement palette officielle JO 2024
• Contrast compliance : Ratios conformes WCAG accessibilité