Retours & statut

Indicateur de chargement

مؤشر التحميلSpinner

Stablesrc/dsm/components/spinner.tsx
Le spinner signale une attente courte et de durée inconnue : chargement d'une page, vérification d'un champ, action en cours dans un bouton.

Import

import { Spinner } from "@/dsm/components/spinner";

Exemples

Tailles

sm, md et lg.

LTR
ChargementChargementChargement

Tons et libellé visible

current, primary, et affichage du texte.

LTR
ChargementChargementEnvoi du dossier en cours

Vérification en cours

Spinner accompagnant un contrôle de disponibilité.

LTR
Chargement

Vérification de la disponibilité du créneau du 14 octobre…

Usage

Quand l'utiliser

  • Utilisez-le pour une attente de quelques secondes sans progression mesurable.
  • Dans un bouton, préférez la prop `loading` du `Button`, qui embarque déjà ce spinner.

Quand ne pas l'utiliser

  • N'utilisez pas de spinner pour une tâche mesurable de plusieurs secondes ou minutes : préférez `Progress`.
  • Ne l'affichez jamais seul sans texte accessible : `label` doit toujours décrire l'attente, même masqué visuellement.

Accessibilité & langues

Accessibilité

  • Le conteneur porte `role="status"` : l'attente est annoncée aux lecteurs d'écran dès son apparition.
  • Le libellé (« Chargement » par défaut) reste toujours présent, visible ou non (`dsm-sr-only`).

RTL & multilingue

  • La rotation de l'icône est continue et symétrique : aucune adaptation n'est nécessaire selon le sens de lecture.

Propriétés

Spinner
PropriétéTypeDéfautDescription
size"sm" | "md" | "lg"mdTaille de l'icône.
tone"current" | "primary"current`current` hérite de la couleur du texte parent.
labelstringt.loadingTexte accessible, visible seulement si `showLabel`.
showLabelbooleanfalseAffiche le libellé à côté de l'icône plutôt qu'en `sr-only`.

Composants liés