Pulse Placeholder

Um brilho claro passa por cima de formas cinza de placeholder.

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).

O elemento aumenta ou esmaece suavemente, de forma repetida.

Adicione um efeito "Pulse" (também chamado pulsing) em [onde].
O elemento deve crescer suavemente e voltar em um ritmo lento e constante: sutil, sem efeito de quique.
Repita em loop contínuo sem deslocar o layout ao redor, e pare se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma versão minúscula e desfocada da imagem ocupa o lugar e fica nítida quando a imagem completa carrega.

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.

Uma barra fina no topo da página avança aos poucos durante a navegação e se completa ao carregar.

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.

Três pontos dentro de um balão pulsam ou sobem em sequência para mostrar que alguém ou uma IA está digitando.

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.