Spinner sans attribut size (taille md par défaut).
Voir le code
<ar-spinner></ar-spinner>Aller à la liste des composantsAller au menu de la page
CDN npm Attributs et propriétés 4 CSS Parts 2 CSS Custom Properties 1
Sur cette page
Spinner
AlphaIndique qu'une opération est en cours quand sa durée est inconnue. À utiliser pour un état de chargement là où une barre de progression déterminée n'est pas pertinente.
- L’animation SVG est masquée aux lecteurs d’écran (
aria-hidden). Un<div role="alert">invisible annonce les changements d’état — le passage “en cours → terminé” est vocalisé sans intervention supplémentaire — conforme WCAG 4.1.3 (ouvre dans un nouvel onglet)Status Messages : les messages de statut doivent être annoncés aux technologies d'assistance sans déplacer le focus. - Les labels “en cours” (
loading-label) et “terminé” (done-label) ont des valeurs par défaut raisonnables utilisées si non fournis.
- Adapter
loading-labeletdone-labelau contexte. Les valeurs par défaut sont génériques — préférez des labels qui décrivent l’opération en cours (“Envoi du formulaire…”, “Fichier chargé.”) pour que l’annonce soit utile et non redondante. - Ne pas afficher plusieurs spinners simultanément sans les différencier. Chaque
role="alert"visible déclenche une annonce — des labels identiques sur plusieurs spinners actifs simultanément créent une confusion pour les utilisateurs de lecteurs d’écran.
Les exemples de cette page sont affichés avec le thème neutre du starter-kit.
Spinner avec size="xs".
Voir le code
<ar-spinner size="xs"></ar-spinner>Spinner avec size="sm".
Voir le code
<ar-spinner size="sm"></ar-spinner>Spinner avec size="lg".
Voir le code
<ar-spinner size="lg"></ar-spinner>Les 4 tailles disponibles affichées côte à côte (xs, sm, md, lg).
Voir le code
<ar-spinner size="xs"></ar-spinner>
<ar-spinner size="sm"></ar-spinner>
<ar-spinner></ar-spinner>
<ar-spinner size="lg"></ar-spinner>Manipulez les attributs pour voir le code et la preview se mettre à jour.
<ar-spinner></ar-spinner>Si vous utilisez l'autoloader, les composants détectés dans la pages sont chargés automatiquement, donc pas besoin de les importer individuellement.
Pour un import manuel, voici comment vous y prendre.
Importez ce composant depuis le CDN.
<script type="module" src="https://unpkg.com/@ariane-ui/core/dist/components/spinner/index.js"></script>Après avoir installé le paquet via npm, vous pouvez importer le composant ainsi :
import '@ariane-ui/core/dist/components/spinner/index.js';Attributs et propriétés
1 sur 4
donereflète
Passe le spinner en état "terminé" : masque le SVG et met à jour l'annonce ARIA.
2 sur 4
loadingLabelreflèteloading-label
Texte annoncé aux lecteurs d'écran pendant le chargement. Traduit automatiquement selon `lang` si non personnalisé.
3 sur 4
doneLabelreflètedone-label
Texte annoncé aux lecteurs d'écran quand le chargement est terminé. Traduit automatiquement selon `lang` si non personnalisé.
4 sur 4
sizereflète
CSS Parts
Utilisez ::part(name) pour styler ces éléments depuis l'extérieur.
Certaines parts indiquent un rôle transverse, partagé avec d'autres composants — voir Personnalisation avancée.
1 sur 2spinner
L'élément `<svg>` du spinner (visible quand `done` est false).
2 sur 2status
Le `<div role="alert">` lu par les lecteurs d'écran.
CSS Custom Properties
1 sur 1--ar-spinner-stroke-color
Couleur du trait SVG. Hérite de `currentColor` par défaut.
La langue de ce composant suit l'attribut lang de la page (<html lang>).
Vous pouvez appliquer une langue différente à une instance donnée en posant l'attribut lang directement dessus.
Voir la page Traductions pour le détail du mécanisme et la liste des traductions disponibles.
lang étant un attribut HTML natif, il n'apparaît pas dans le tableau « Attributs & Propriétés ».