Loading Indicators
Componentes de indicadores de carregamento com múltiplas variantes e animações para diferentes contextos de uso.
Utilização
import { Loader } from "@convertcompany/ui";
Exemplos
Tamanhos
Todos os indicadores de carregamento suportam três tamanhos: sm, md e lg.
Variantes
Circular
Indicador de carregamento circular com animação de rotação.
Pulse
Indicador de carregamento com efeito de pulso.
Pulse Dot
Indicador de carregamento com ponto pulsante.
Dots
Indicador de carregamento com três pontos animados.
Typing
Indicador de carregamento que simula digitação.
Wave
Indicador de carregamento com efeito de onda.
Bars
Indicador de carregamento com barras animadas.
Terminal
Indicador de carregamento que simula um terminal.
Recording
Indicador de carregamento com ícone de microfone para gravação.
Indicadores de texto
Text Blink
Indicador de carregamento com texto piscante.
Text Shimmer
Indicador de carregamento com texto com efeito shimmer.
Loading Dots
Indicador de carregamento com texto e pontos animados.
Customização
Você pode customizar a aparência dos indicadores usando a prop className.
Uso em botões
Indicadores de carregamento são frequentemente usados em botões para mostrar estados de carregamento.
Componentes individuais
Além do componente Loader principal, você também pode importar componentes específicos para casos de uso mais específicos.
Props
Loader
| Propriedade | Tipo |
|---|---|
| variantA variante do indicador de carregamento. | circular pulse pulse-dot dots typing wave bars terminal text-blink text-shimmer loading-dots recording |
| sizeO tamanho do indicador de carregamento. | sm md lg |
| textO texto a ser exibido (apenas para variantes de texto). | string |
| classNameClasse CSS adicional para customização. | string |
| childrenConteúdo do indicador. | ReactNode |
| ...propsTodas as demais props nativas de <div>. | <HTMLDivElement> |