Skeleton Shimmer
Também chamada Skeleton wave, Shimmer effect, placeholder-wave
Um brilho claro passa por cima de formas cinza de placeholder.
Onde usar
Placeholders de carregamento de conteúdo
Variações
- wave / shimmer
- text lines
- avatar + card
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 "Skeleton Shimmer" (também chamado skeleton wave ou shimmer effect) em [onde].
Uma faixa de luz suave deve atravessar as formas cinza da esquerda para a direita e fazer uma pausa curta antes da próxima passada: fluido e sem pressa.
Faça as formas seguirem o layout real para que nada pule quando o conteúdo carregar, e mostre placeholders estáticos se o usuário preferir movimento reduzido (prefers-reduced-motion).Animações parecidas
Pulse Placeholder
Também chamada Skeleton pulse, placeholder-glow
Blocos cinza de placeholder aparecem e esmaecem suavemente para indicar carregamento.
Onde usar
Telas skeleton
Adicione um "Pulse Placeholder" (também chamado skeleton pulse) em [onde].
Blocos cinza no formato do conteúdo que vai chegar devem clarear e voltar devagar, todos juntos, em um ritmo suave e constante.
Faça os placeholders seguirem o layout real para que nada pule quando o conteúdo chegar, e deixe-os parados se o usuário preferir movimento reduzido (prefers-reduced-motion).A
Passe o mouse por cima
Shine Sweep
Também chamada Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button
Ao passar o ponteiro, uma faixa diagonal de luz atravessa o elemento de um lado ao outro.
Onde usar
Botões, cards, badges
Adicione um efeito de hover "Shine Sweep" (também chamado sheen, shiny button, shine on hover, glint, shimmer ou shimmer button) em [onde].
Uma faixa diagonal de luz suave deve atravessar o elemento da esquerda para a direita, repetindo com uma pausa curta enquanto o ponteiro estiver sobre ele.
Mantenha a faixa recortada dentro do elemento, pare-a quando o ponteiro sair e não a reproduza se o usuário preferir movimento reduzido (prefers-reduced-motion).ABC DEFGH
Shimmer Text
Também chamada Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
Um brilho percorre as letras repetidamente.
Onde usar
Badges e etiquetas de anúncio
Adicione um efeito "Shimmer Text" (também chamado animated shiny text ou metallic shimmer text) em [onde].
Uma faixa de luz deve passar suavemente pelas letras da esquerda para a direita e se repetir depois de uma pausa curta.
Mantenha o texto legível sob o brilho e deixe-o parado se o usuário preferir movimento reduzido (prefers-reduced-motion).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
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
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.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).