Spinners
Indicadores de
carregamento.
Três tamanhos de spinner circular para diferentes contextos de loading.
Barras de Progresso
Progresso
visual.
Barras horizontais animadas com quatro níveis de preenchimento.
Skeletons
Placeholders de
carregamento.
Esqueletos animados com efeito shimmer para linhas de texto, cards e imagens.
Estados Interativos
Botões e
inputs.
Todos os estados visuais de botões e campos de entrada.
PadrãoPadrão
HoverHover
FocoFoco
AtivoAtivo
DesabilitadoDesabilitado
CarregandoCarregando
Estados de Botão
Indicadores de Status
Presença e
disponibilidade.
Badges de status com dot pulsante para indicar presença do usuário.
Online
Offline
Ausente
Ocupado
Inativo
Badges de Status
Transições
Animações de
entrada.
Seis padrões de transição para elementos de interface.
Fade In
Opacity 0 → 1
200ms ease
Slide Up
translateY(20px) → 0
300ms ease-out
Scale
scale(0.96) → 1
250ms cubic-bezier
Blur In
blur(8px) → 0
400ms ease
Expand
height 0 → auto
350ms ease-in-out
Reveal
clip-path reveal
500ms ease
