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
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 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.Animações parecidas
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
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).ABC DEFG
Typewriter (máquina de escrever)
Também chamada Typing Animation, Typewriter Effect, Typing Text
Os caracteres aparecem um de cada vez como se estivessem sendo digitados, geralmente seguidos de um cursor piscando.
Onde usar
Títulos hero, slogans
Adicione um efeito de máquina de escrever (Typewriter) em [onde], também chamado de typing animation ou typing text.
Os caracteres devem aparecer um de cada vez em um ritmo de digitação constante, com um cursor logo após o último caractere digitado que pisca algumas vezes quando a digitação termina.
Reproduza só uma vez em vez de em loop, deixe os leitores de tela lerem o texto completo desde o início e mostre o texto completo 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
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).Blur-Up Placeholder
Também chamada LQIP, Blur placeholder, Progressive image load
Uma versão minúscula e desfocada da imagem ocupa o lugar e fica nítida quando a imagem completa carrega.
Onde usar
Imagens hero, galerias
Adicione um efeito de carregamento de imagem "Blur-Up Placeholder" (também chamado LQIP ou blur placeholder) em [onde].
Uma versão minúscula e bem desfocada da imagem deve ocupar o espaço dela na hora e, quando a imagem completa carregar, ficar nítida no lugar de forma suave e bem rápida.
Reserve o tamanho exato da imagem para que nada se desloque quando ela chegar e corte as bordas desfocadas para que não vazem para fora do quadro.