Spinner (indicateur de chargement)

Graphique rotatif de base, indiquant un état en cours. Il est également utilisé à l'intérieur du masque de chargement (LhLoading).

Utilisation de base

Trois tailles

<script setup lang="ts">
</script>

<template>
  <div class="demo-spinner-row">
    <LhSpinner size="small" />
    <LhSpinner size="medium" />
    <LhSpinner size="large" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div class="demo-spinner-row">
    <LhSpinner size="small" />
    <LhSpinner size="medium" />
    <LhSpinner size="large" />
  </div>
</template>

Couleur personnalisée

Couleur

<script setup lang="ts">
</script>

<template>
  <div class="demo-spinner-row">
    <LhSpinner color="#8f9779" />
    <LhSpinner color="#b55442" />
    <LhSpinner color="#4a6fa5" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div class="demo-spinner-row">
    <LhSpinner color="#8f9779" />
    <LhSpinner color="#b55442" />
    <LhSpinner color="#4a6fa5" />
  </div>
</template>

API

LhSpinner Props

Prop	Description	Type	Valeur par défaut
size	Taille	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
color	Couleur de rotation (valeur CSS color ; en l'absence de valeur, hérite de currentColor)	string	—
sx	Props de mise en page sx	LhSxProps	—

Accessibilité

• Le graphique est purement décoratif, aria-hidden="true" le retire de l'arbre d'accessibilité ; l'état « en cours » doit être porté sémantiquement par le conteneur parent (par ex. role="status")
• L'animation de rotation respecte prefers-reduced-motion, avec dégradation en anneau statique semi-circulaire

Définitions de types

Ce composant exporte les structures de types TypeScript suivantes (extraites automatiquement de packages/components/spinner/src/types.ts et des sources @lh-ui/share/core/* ; cliquez sur chaque entrée pour déplier la définition complète ; la description des props se trouve dans le tableau Props ci-dessus) :

LhSpinnerProps

export interface LhSpinnerProps {
  /** Taille */
  size?: LhSpinnerSize
  /** Couleur de rotation (valeur CSS color ; en l'absence de valeur, hérite de currentColor) */
  color?: string
  /** Props de mise en page sx */
  sx?: LhSxProps
}

LhSpinnerSize _{(provenant de @lh-ui/share/core/spinner)}

/** Taille du graphique rotatif */
export type LhSpinnerSize = (typeof LH_SPINNER_SIZE_CONST)[keyof typeof LH_SPINNER_SIZE_CONST]

Constantes

Les constantes publiques utilisées par ce composant sont les suivantes (vous pouvez cliquer sur une entrée de même nom dans les colonnes « Type / Valeur par défaut » du tableau Props pour sauter jusqu'ici) :

LH_SPINNER_SIZE_CONST _{(provenant de @lh-ui/share/core/spinner)}

export const LH_SPINNER_SIZE_CONST = {
  ...LH_SIZE_CONST,
} as const

LH_SPINNER_SIZE_PX _{(provenant de @lh-ui/share/core/spinner)}

/** Correspondance taille → diamètre en px */
export const LH_SPINNER_SIZE_PX: Record<LhSpinnerSize, number> = {
  small: 16,
  medium: 24,
  large: 32,
  mini: 12,
  'x-large': 40,
}