Uma animação de "carregando", como a demonstrada abaixo, é útil para indicar que algum elemento, informação ou execução de código está em andamento:

Uma excelente coleção pode ser encontrada em Loader Generator

Esqueleto de elementos

O uso de esqueletos transmite a ideia de uma estrutura organizada, proporcionando aos usuários uma sensação mais confortável durante o carregamento.

 

 

 

 

Para implementar esse comportamento, basta adicionar a classe skeleton, que contém a animação shine, e aplicar pointer-events: none para evitar a ativação de links e botões

.skeleton {
  background: linear-gradient(110deg, #dcdcdc 20%, #f4f4f4 60%, #dcdcdc 80%);
  background-size: 200% 100%;
  animation: 1.5s shine linear infinite;
  pointer-events: none;
}

@keyframes shine {
  to {
    background-position-x: -200%;
  }
}