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
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 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.Animações parecidas
ABCD
Blur In
Também chamada Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
O elemento começa bem desfocado e vai ganhando nitidez, muitas vezes enquanto desliza ou aparece.
Onde usar
Revelação de títulos e textos hero
Adicione uma animação de entrada "Blur In" (também chamada text focus in, focus in ou blur text reveal) em [onde].
O conteúdo deve começar bem desfocado e transparente e depois ganhar nitidez no lugar: suave e um tanto lento, sem deslocamento.
Reproduza só uma vez e mostre o texto nítido imediatamente se o usuário preferir movimento reduzido (prefers-reduced-motion).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
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).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).ABCDEFGHIJKL
Role aqui dentro
Progressive Blur
Também chamada Gradient blur edge
A intensidade do desfoque aumenta aos poucos em direção a uma borda, para o conteúdo sumir suavemente.
Onde usar
Bordas de contêineres com rolagem, cabeçalhos
Adicione uma borda "Progressive Blur" (também chamada gradient blur edge) em [onde].
O conteúdo que rola em direção à borda deve ficar cada vez mais desfocado e suave, aumentando aos poucos em vez de ser cortado por uma linha dura.
Mostre o desfoque só na borda que ainda tem mais conteúdo além dela e não deixe a área desfocada bloquear cliques nem a rolagem.Mais em Loading & Progress
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).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).