Top Loading Bar (barra de carregamento)
Também chamada Page progress bar, NProgress
Uma barra fina no topo da página avança aos poucos durante a navegação e se completa ao carregar.
Onde usar
Carregamento de rotas em SPA
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 uma barra de carregamento (Top Loading Bar) em [onde], também chamada page progress bar.
Uma barra fina na borda superior deve avançar rápido no início e depois cada vez mais devagar enquanto a página carrega; quando o carregamento terminar, ela deve correr até o fim e esmaecer.
Nunca deixe que ela chegue ao fim antes de o carregamento realmente terminar, e não deixe que ela cubra ou desloque o conteúdo da página.Animações parecidas
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.Role aqui dentro
Scroll Progress Indicator
Também chamada Reading Progress Bar, Progress Bar
Uma barra ou um anel se preenche conforme o usuário rola a página ou o artigo.
Onde usar
Artigos e páginas longas
Adicione um "Scroll Progress Indicator" (também chamado de reading progress bar) em [onde].
Uma barra fina no topo deve se preencher da esquerda para a direita conforme o leitor rola, chegando à largura total no final.
Ligue-a diretamente à posição de rolagem, sem atraso de suavização, e não deixe que ela cubra o conteúdo.Indeterminate Linear Progress (barra de progresso indeterminada)
Também chamada Indeterminate progress bar, Buffer bar
Um segmento de barra percorre a trilha repetidamente quando a duração é desconhecida.
Onde usar
Carregamento no topo da página ou em cards
Adicione uma barra de progresso indeterminada (Indeterminate Linear Progress) em [onde], também chamada indeterminate progress bar.
Um segmento curto deve percorrer a trilha de uma ponta à outra várias vezes, rápido e suave, enquanto a duração da tarefa for desconhecida.
Faça o segmento entrar e sair totalmente da trilha para que o loop não tenha emendas visíveis, e marque-a como barra de progresso ocupada para leitores de tela.Mais em Loading & Progress
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).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.