Bouncing Dots
Também chamada Dots loader, Ellipsis loader, Three-dot loader
Uma fileira de pontos quica, esmaece ou muda de tamanho em sequência.
Onde usar
Carregamento inline, espera em chats
Variações
- bounce
- pulse
- wave
- fade sequence
Prompt
Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.
Adicione "Bouncing Dots" (também chamado dots loader ou three-dot loader) em [onde].
Os pontos devem pular e aterrissar um após o outro em um ritmo leve e elástico, com uma pausa curta antes de a sequência se repetir.
Mantenha o loop contínuo, dê a ele um rótulo de status para leitores de tela e pare o movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).Animações parecidas
Typing Indicator
Também chamada Typing dots, Chat is typing
Três pontos dentro de um balão pulsam ou sobem em sequência para mostrar que alguém ou uma IA está digitando.
Onde usar
Chats, assistentes de IA
Adicione um "Typing Indicator" (também chamado typing dots) em [onde].
Os pontos dentro de um pequeno balão de chat devem subir e clarear um após o outro em um ritmo suave e delicado enquanto o outro lado digita.
Mantenha o loop contínuo, remova o balão assim que a mensagem chegar e dê aos leitores de tela um texto de status curto no lugar dos pontos.Bar Loader (Equalizer)
Também chamada Bars loader, Audio bars
Barras verticais crescem e encolhem fora de fase, como um equalizador de áudio.
Onde usar
Indicadores de carregamento ou de reprodução em andamento
Adicione uma animação de carregamento "Bar Loader (Equalizer)" (também chamada bars loader ou audio bars) em [onde].
Algumas barras verticais devem esticar e encolher fora de sincronia entre si como um equalizador de áudio, em um ritmo animado mas constante.
Mantenha o loop contínuo, dê a ela um rótulo de status para leitores de tela e pare o movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).ABCDEF
Wavy Text
Também chamada Text Wave
As letras sobem e descem em sequência, criando uma onda que percorre a palavra.
Onde usar
Títulos divertidos, indicadores de carregamento
Adicione um efeito "Wavy Text" (também chamado de text wave) em [onde].
As letras devem subir e descer uma após a outra para que uma onda suave e fluida percorra a palavra sem parar.
Faça o loop sem cortes, garanta que os leitores de tela leiam como uma só palavra e pare a onda se o usuário preferir movimento reduzido (prefers-reduced-motion).Mais em Loading & Progress
Button Loading State
Também chamada Spinner button, Loading button, Button spinner, Submit loading state
Um botão troca o texto por um pequeno spinner, ou o acrescenta, enquanto uma ação é executada.
Onde usar
Envio de formulários, ações assíncronas
Adicione um "Button Loading State" (também chamado spinner button ou loading button) em [onde].
Ao ser pressionado, o botão deve afundar um pouco, esmaecer o texto e mostrar um pequeno spinner no lugar enquanto a ação roda; ao terminar, o texto volta.
Mantenha a largura do botão fixa durante o carregamento, bloqueie cliques repetidos e anuncie o estado ocupado para leitores de tela.Circular Spinner
Também chamada Spinner, Throbber, Circular indeterminate
Um anel ou arco gira continuamente para mostrar que algo está carregando.
Onde usar
Botões, carregamento de páginas
Adicione um "Circular Spinner" (também chamado spinner ou throbber) em [onde].
Um arco deve girar de forma constante em volta de um anel suave enquanto se alonga e encurta, fluido e contínuo.
Mantenha a rotação contínua, dê a ele um rótulo de carregamento para leitores de tela e desacelere ou pare se o usuário preferir movimento reduzido (prefers-reduced-motion).Determinate Progress Bar (barra de progresso)
Também chamada Progress bar fill, Progress Indicator, Progress bar, Circular progress
Uma barra se preenche da esquerda para a direita na proporção do andamento da tarefa.
Onde usar
Uploads, formulários em várias etapas
Adicione uma barra de progresso (Determinate Progress Bar) em [onde], também chamada progress bar fill ou progress indicator.
A barra deve se preencher da esquerda para a direita acompanhando o progresso real, com transições suaves entre as atualizações, e mostrar a porcentagem ao lado.
Use a semântica correta de barra de progresso com valores atual, mínimo e máximo para que leitores de tela consigam lê-la, e nunca deixe o preenchimento voltar.