Animação para esqueleto de elementos
Usando HTML, CSS e keyframes para animação de esqueleto de elementos carregando com gradiente
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%;
}
}