Loading

Affichez des états de chargement avec divers indicateurs animés pour montrer les processus en cours.

Import

import { Loading } from 'asterui'

Exemples

Chargement basique

Spinner de chargement par défaut.

import { Loading } from 'asterui'

function App() {
  return (
      <Loading />
    )
}

export default App

Types de chargement

Différents types d'animation pour les indicateurs de chargement.

import { Loading, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="md" align="center" wrap>
        <Loading type="spinner" />
        <Loading type="dots" />
        <Loading type="ring" />
        <Loading type="ball" />
        <Loading type="bars" />
        <Loading type="infinity" />
      </Space>
    )
}

export default App

Tailles

Contrôlez la taille de l'indicateur de chargement.

import { Loading, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="md" align="center">
        <Loading size="xs" />
        <Loading size="sm" />
        <Loading size="md" />
        <Loading size="lg" />
      </Space>
    )
}

export default App

Couleurs

Différentes variantes de couleur pour les indicateurs de chargement.

import { Loading, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="md" align="center" wrap>
        <Loading color="primary" />
        <Loading color="secondary" />
        <Loading color="accent" />
        <Loading color="neutral" />
        <Loading color="info" />
        <Loading color="success" />
        <Loading color="warning" />
        <Loading color="error" />
      </Space>
    )
}

export default App

API

`Loading`

Propriété	Description	Type	Par défaut
`size`	Taille de l’indicateur de chargement	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`
`type`	Type d’animation de chargement	`'spinner' \| 'dots' \| 'ring' \| 'ball' \| 'bars' \| 'infinity'`	`'spinner'`
`color`	Couleur de l’indicateur de chargement	`'primary' \| 'secondary' \| 'accent' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'error'`	`'primary'`
`className`	Classes CSS supplémentaires	`string`	-
`data-testid`	ID de test pour les tests	`string`	-

Accessibilité

Utilise aria-label pour décrire l’état de chargement
L’animation peut être mise en pause par les utilisateurs qui préfèrent un mouvement réduit
Assurez-vous que les indicateurs de chargement sont associés à du texte pour les lecteurs d’écran lorsque cela est possible