Loading

Exiba estados de carregamento com vários indicadores animados para mostrar processos em andamento.

Importação

import { Loading } from 'asterui'

Exemplos

Loading Básico

Spinner de carregamento padrão.

import { Loading } from 'asterui'

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

export default App

Tipos de Loading

Diferentes tipos de animação para indicadores de carregamento.

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

Tamanhos

Controle o tamanho do indicador de carregamento.

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

Cores

Diferentes variantes de cor para indicadores de carregamento.

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`

Propriedade	Descrição	Tipo	Padrão
`size`	Tamanho do indicador de carregamento	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`
`type`	Tipo de animação de carregamento	`'spinner' \| 'dots' \| 'ring' \| 'ball' \| 'bars' \| 'infinity'`	`'spinner'`
`color`	Cor do indicador de carregamento	`'primary' \| 'secondary' \| 'accent' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'error'`	`'primary'`
`className`	Classes CSS adicionais	`string`	-
`data-testid`	ID de teste para testes	`string`	-

Acessibilidade

Usa aria-label para descrever o estado de carregamento
Animação pode ser pausada por usuários que preferem movimento reduzido
Garanta que indicadores de carregamento sejam pareados com texto para leitores de tela quando possível