Loading

Muestra estados de carga con varios indicadores animados para mostrar procesos en curso.

Importar

import { Loading } from 'asterui'

Ejemplos

Loading Básico

Spinner de carga predeterminado.

import { Loading } from 'asterui'

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

export default App

Tipos de Loading

Diferentes tipos de animación para indicadores de carga.

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

Tamaños

Controla el tamaño del indicador de carga.

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

Colores

Diferentes variantes de color para indicadores de carga.

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`

Propiedad	Descripción	Tipo	Predeterminado
`size`	Tamaño del indicador de carga	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`
`type`	Tipo de animación de carga	`'spinner' \| 'dots' \| 'ring' \| 'ball' \| 'bars' \| 'infinity'`	`'spinner'`
`color`	Color del indicador de carga	`'primary' \| 'secondary' \| 'accent' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'error'`	`'primary'`
`className`	Clases CSS adicionales	`string`	-
`data-testid`	ID de prueba para pruebas	`string`	-

Accesibilidad

Usa aria-label para describir el estado de carga
La animación puede ser pausada por usuarios que prefieren movimiento reducido
Asegura que los indicadores de carga estén emparejados con texto para lectores de pantalla cuando sea posible