Spinner
Indicateur d'attente
Un indicateur animé compact pour un travail dont l'avancement est inconnu, accompagné d'un état d'attente explicite.
Avec vos mots
Ce que les gens décrivent
Alias documentés : roue de chargement, indicateur d'activité, indicateur occupé
- un symbole qui tourne pendant le chargement
- montrer que le bouton travaille encore
- une attente inconnue sans pourcentage
- un petit chargement près du texte d'état
- indiquer un travail de fond en cours
- un symbole occupé quand la durée est incertaine
Essayer
Attendre et suivre une progression
Comparer les trois comportements
Scénario comparatif partagé : Un espace de travail attend la fin d'un contenu ou d'une opération et ne communique que la progression qu'il peut mesurer honnêtement.
Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.
Indicateur d'attente
Spinner communique une attente indéterminée ; Progress bar montre un avancement mesurable, tandis que Skeleton préfigure le contenu en chargement.
Votre mission
Lancer l'enregistrement, vérifier qu'une double activation est bloquée, activer la réduction des animations et attendre l'état final.
Cas limite à vérifier
Après un seuil long, l'interface ajoute une explication et une action annuler ou réessayer au lieu de tourner sans fin.
Mission
Indicateur d'attente - Spinner
Lancer l'enregistrement, vérifier qu'une double activation est bloquée, activer la réduction des animations et attendre l'état final.
Parties du spécimen
Sélectionnez un repère directement sur le spécimen, ou utilisez la liste ci-dessous, pour afficher son rôle. Masquez les repères pour manipuler librement le labo.
Icône d'état
Un repère visuel redondant pour le type de message, jamais le seul indice.
À utiliser quand
- Une courte opération n'a pas de valeur d'avancement utile
- Un bouton doit montrer qu'une requête est en attente
À éviter quand
- Un pourcentage connu peut être affiché
- L'attente est assez longue pour exiger détail ou annulation
Comparer les concepts proches
Progress bar exige une valeur mesurable pertinente ; Spinner sert à un avancement inconnu, tandis que Skeleton représente la mise en page finale.
Barre de progressionSkeleton préfigure la forme du contenu ; Spinner communique une attente inconnue de façon compacte, tandis que Progress bar rapporte un avancement mesurable.
Squelette de chargementBuild pack
Transformer ce concept en prompt utile
Choisissez la tâche et la destination. Les noms techniques restent en anglais.
Détails techniques
Comportements
Marquer la région occupée
La région de contenu expose son état occupé tandis que l'indicateur visuel reste redondant.
Annoncer les changements utiles
Une région live annonce un nouvel état seulement si la mise à jour est importante et n'a pas déjà le focus.
États
Tâche au repos
Tâche au repos
Tâche en chargement
Tâche en chargement
Tâche plus longue que prévu
Tâche plus longue que prévu
Tâche annulée
Tâche annulée
Tâche terminée
Tâche terminée
Transitions d’état
Tâche au repos → Tâche en chargement
Une opération de durée restante inconnue démarre et marque sa région comme occupée.
Tâche en chargement → Tâche plus longue que prévu
Après le seuil d’attente longue, une explication et l’action Annuler apparaissent pendant que l’enregistrement continue.
Tâche plus longue que prévu → Tâche terminée
L’enregistrement se termine, retire le spinner et affiche l’état final Enregistré sans nouvelle activation.
Tâche plus longue que prévu → Tâche annulée
L’activation d’Annuler arrête l’enregistrement en attente et affiche Réessayer sans perdre le document.
Tâche annulée → Tâche en chargement
L’activation de Réessayer lance un nouvel enregistrement et masque l’ancien état d’annulation.
Tâche terminée → Tâche au repos
Réinitialiser restaure l’exemple rejouable d’enregistrement dans son état initial prêt.
Scénarios de test
- Contexte
- Un bouton Enregistrer envoie une courte requête dont la durée serveur est inconnue.
- Mission
- Lancer l'enregistrement, vérifier qu'une double activation est bloquée, activer la réduction des animations et attendre l'état final.
- État principal
- Le bouton expose Enregistrement, empêche une double requête et montre un indicateur animé redondant.
- Cas limite
- Après un seuil long, l'interface ajoute une explication et une action annuler ou réessayer au lieu de tourner sans fin.
Accessibilité
- Role
- status text with aria-busy on the updated region
- Nom accessible
- Le contrôle principal ou la région nommée possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
- Focus
- Le focus reste sur le contrôle initiateur sauf si une transition documentée remplace toute la vue.
- Fermeture
- L'indicateur s'arrête lorsque le travail se termine ou est annulé ; il n'est jamais un message à fermer manuellement.
- Scroll
- Le chargement et le contenu de remplacement réservent assez d'espace pour éviter les sauts de mise en page et conserver la position de défilement.
- Annonce
- Un statut concis annonce le début et le résultat final, tandis que le visuel reste masqué aux technologies d'assistance.
- Clavier
- Tab atteint le contrôle initiateur
- Le contrôle en attente bloque la double activation
- Annuler reste accessible au clavier lorsque proposé
Bindings
status text plus decorative indicator
- implementationKind
- custom
- nativeElement
- status text plus decorative indicator
- ariaPattern
- status and aria-busy on the updated region
- radixPrimitive
- Non applicable
- shadcnRecipe
- Non applicable
- runtimeDependency
- Non applicable
- packageName
- Non applicable
- exportName
- Non applicable
- exactVersion
- Non applicable
- status
- exception
- verifiedAt
- 2026-07-16
- deprecationStatus
- active
- replacement
- Non applicable
- validFrom
- Non applicable
- validUntil
- Non applicable
Limite d’équivalence : The animated mark is visual only. The busy region and a meaningful textual status carry the accessible state.
Vérifier la source du binding
Sources
- WAI-ARIA 1.2: aria-busy
W3C WAI · standard · 2026-07-16
Affirmation couverte : Spinner: normative aria-busy state used to expose an updating region without announcing incomplete content.
- WCAG 2.2: Status Messages
W3C WAI · standard · 2026-07-16
Affirmation couverte : Spinner: WCAG status-message requirements used to qualify non-focus-moving announcements.
Vérifié le 2026-07-16 · rev. 1
- Responsable
- SkillCodex Editorial
- Statut
- review
- Relecture
- Independent editorial review pending
- Prochaine revue
- 2026-10-16
- Publication
- Non publiée
- Historique
- Brouillon initial sourcé du MVP, en attente de relecture indépendante.