Skip to main content

Loading

Apresentação​

O componente Loading é responsável por exibir um indicador visual de carregamento. Ele é ideal para fornecer feedback visual ao usuário durante operações assíncronas, carregamento de dados ou qualquer situação que exija uma indicação de espera.

Quando usar​

  • Durante o carregamento de dados
  • Em operações assíncronas
  • Durante o processamento de formulários
  • Em transições de estado
  • Para indicar que uma ação está em andamento
  • Em situações que requerem feedback visual de espera

Forma básica de uso​

import { Loading } from 'eitri-luminus';

// Loading básico
<Loading />

// Loading com classes personalizadas
<Loading className="loading-spinner loading-lg" />

// Loading em diferentes tamanhos
<Loading className="loading-spinner loading-xs" />
<Loading className="loading-spinner loading-sm" />
<Loading className="loading-spinner loading-md" />
<Loading className="loading-spinner loading-lg" />

// Loading com diferentes estilos
<Loading className="loading-dots" />
<Loading className="loading-ring" />
<Loading className="loading-ball" />
<Loading className="loading-bars" />
<Loading className="loading-infinity" />

Propriedades​

PropriedadeTipoDescrição
classNamestringClasses CSS adicionais para o loading
idstringIdentificador único do componente

Heranças​

O componente Loading herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

  • Propriedades de estilo (margin, padding, etc)
  • Propriedades de layout (flex, grid, etc)
  • Propriedades de posicionamento
  • Propriedades de acessibilidade
  • Propriedades de identificação (id, data-e)

Observações​

  • O componente usa a classe 'loading' para estilização base
  • Suporta diferentes variantes de animação (spinner, dots, ring, etc)
  • Oferece diferentes tamanhos (xs, sm, md, lg)
  • É possível personalizar a aparência usando classes do Tailwind
  • O componente é responsivo por padrão
  • Ideal para feedback visual de carregamento
  • Mantém a semântica HTML apropriada
  • Pode ser combinado com outros componentes
  • Suporta diferentes cores através de classes do Tailwind
  • Pode ser usado em qualquer contexto que necessite de feedback visual de carregamento