As telas de esqueleto são parte integrante da retenção de visitantes nas tendências de design moderno. Eles criam uma ilusão de velocidade e gerenciam as expectativas dos usuários, mantendo-os informados sobre o status do conteúdo de uma página. Uma das soluções mais essenciais, embora subestimadas, que as telas de esqueleto oferecem é sua ajuda para evitar Mudança cumulativa de layout (CLS), permitindo que o conteúdo seja exibido de uma só vez, em vez de sequencialmente como ele carrega.

Pronto para tornar suas interfaces mais intuitivas e expressivas implementando telas de esqueleto em seus próprios projetos? Veja como começar.

Projete o layout da página da web

Projetar um layout de página da web ajuda a cristalizar suas expectativas. Você deve definir sua meta, definir o layout, adicionar quaisquer páginas necessárias e torná-lo acessível e responsivo para diferentes tamanhos de tela. Por enquanto, considere um design simples com uma imagem de capa, imagem de perfil, um pequeno texto e botões de call to action.

Depois de esboçar o design do layout, usando papel ou um aplicativo como Figma ou Adobe XD, é hora de preparar a estrutura HTML.

Construir a Estrutura Básica

Crie um novo arquivo index.html e escrever algum HTML para o layout dentro de um pai com classe = ”contêiner de perfil”. Adicionar classe = ”esqueleto” a cada elemento, a fim de aplicar o efeito de carregamento da tela de esqueleto. Você removerá esta classe quando o conteúdo for carregado usando JavaScript.

Observação: Não se esqueça de vincular os arquivos CSS e JavaScript no cabeçalho do seu index.html Arquivo.

John Doe

Engenheiro de software @ Google || Desenvolvedor Full Stack || Autodidata

Bengaluru, Karnataka, Índia • Informação de contato


534 conexões






Mensagem
Mais

Comece a estilizar sua página

Aplique os atributos CSS básicos como margem, família de fontes, e cor por todo o corpo.

corpo {
 margem: 0;
 família da fonte: Arial;
 cor: rgba (255, 255, 255, 0,9);
}

Adicionar efeito de carregamento

Para adicionar um efeito de carregamento, adicione um ::depois depseudo-elemento para a classe de esqueleto que se move da esquerda (-100%) para a direita (100%) durante um ou dois segundos, resultando em uma animação de brilho.

.skeleton {
 posição: relativa;
 largura: conteúdo máximo;
 estouro: oculto;
 raio da borda: 4px;
 cor de fundo: # 1e2226! importante;
 cor: transparente! importante;
 border-color: # 1e2226! importante;
 seleção do usuário: nenhum;
 cursor: padrão;
}
.skeleton img {
 opacidade: 0;
}
.skeleton:: after {
 posição: absoluta;
 topo: 0;
 direita: 0;
 inferior: 0;
 esquerda: 0;
 transform: translateX (-100%);
 imagem de fundo: gradiente linear (
 90deg,
 rgba (255, 255, 255, 0) 0,
 rgba (255, 255, 255, 0,2) 20%,
 rgba (255, 255, 255, 0,5) 60%,
 rgba (255, 255, 255, 0)
 );
 animação: shimmer 2s infinito;
 contente: '';
}
@keyframes cintilar {
 100% {
 transform: translateX (100%);
 }
}

Estilize as imagens

Agora, vamos estilizar o perfil e a imagem da capa. Não se esqueça de definir estouro: oculto; para evitar inconsistências.

img {
 largura: 100%;
 alinhamento vertical: meio;
}
.profile-container {
 largura: 95%;
 largura máxima: 780 px;
 margem: 0 automático;
 raio da borda: 8px;
 margem superior: 32px;
 cor de fundo: # 1e2226;
 estouro: oculto;
 posição: relativa;
}
.cover-img {
 largura: 100%;
 estouro: oculto;
 cor de fundo: # 1e2226;
 proporção da imagem: 4/1;
}
.profile-img {
 raio da borda: 50%;
 largura: 160px;
 altura: 160px;
 borda: 4px sólido # 000;
 cor de fundo: # 1e2226;
 margem: 0 automático;
 posição: relativa;
 estouro: oculto;
 inferior: 100px;
}

Torne-o responsivo

Para garantir que seu design seja responsivo em telas diferentes, aplique as consultas de mídia de acordo. Se você é um iniciante em desenvolvimento web, deve aprender como usar consultas de mídia em HTML e CSS porque eles são muito importantes na criação de sites responsivos.

@media (largura máxima: 560px) {
 .profile-img {
 largura: 100px;
 altura: 100px;
 inferior: 60px;
 }
}

Estilizar o texto

Estilize o texto definindo um margem, tamanho da fonte, e espessura da fonte. Você também pode alterar a cor do texto, adicionar um título, parágrafo ou âncora tag de acordo com suas preferências. Adicionar um efeito de foco à tag âncora é útil porque permite que o usuário saiba sobre um link.

.profile-text {
 margem superior: -80px;
 preenchimento: 0 16px;
}
.profile-text h1 {
 margem inferior: 0;
 tamanho da fonte: 24px;
 estouro: oculto;
}
.profile-text p {
 margem: 4px 0;
 estouro: oculto;
}
.profile-text h5 {
 margem superior: 4px;
 tamanho da fonte: 14px;
 margin-bottom: 8px;
 peso da fonte: 400;
 cor: # ffffff99;
 estouro: oculto;
}
.profile-text a {
 cor: # 70b5f9;
 tamanho da fonte: 14px;
 decoração de texto: nenhum;
 peso da fonte: 600;
}
.profile-text a: hover {
 cor: # 70b5f9;
 decoração de texto: sublinhado;
}

Estilize o CTA

Uma frase de chamariz (CTA) é importante porque geralmente você deseja converter as visitas dos usuários de alguma forma. Dar a ele uma cor facilmente perceptível ajudará seu CTA a se destacar na página.

.profile-cta {
 preenchimento: 16px 16px 32px;
 display: flex;
}
.profile-cta a {
 preenchimento: 6px 16px;
 raio da borda: 24px;
 decoração de texto: nenhum;
 display: bloco;
}
.message-btn {
 cor de fundo: # 70b5f9;
 cor: # 000;
}
.more-btn {
 cor: herdar;
 borda: 1px solid rgba (255, 255, 255, 0,9);
 margem esquerda: 8px;
}

Saída:

Desative o efeito de carregamento de esqueleto usando JavaScript

Agora que você adicionou o efeito principal usando CSS, é hora de desativá-lo usando JavaScript. A animação se repetirá um número infinito de vezes por padrão, mas você deseja que ela seja executada apenas por alguns segundos. Você pode definir o tempo para 4000 milissegundos usando setTimeout. Isso removerá a classe esqueleto de todos os elementos após 4 segundos.

Observação: Certifique-se de adicionar pouco antes do final do seção.

const skeletons = document.querySelectorAll ('. skeletons')
skeletons.forEach ((esqueleto) => {
 setTimeout (() => {
esqueleto.classList.remove ('esqueleto')
 }, 4000)
})

Saída:

O que é JavaScript e como ele funciona?

Você criou com êxito um efeito de carregamento de tela de esqueleto usando HTML, CSS e JavaScript. Agora, sempre que alguém solicitar um novo conteúdo do servidor, você pode exibir o efeito de carregamento da tela de esqueleto enquanto os dados estão sendo carregados. Está se tornando cada vez mais uma tendência de design popular, como você pode ver em sites como Google, Facebook e Slack.

Enquanto isso, se você é novo no JavaScript, pode aprender o básico entendendo o JavaScript e como ele interage com HTML e CSS.

O que é JavaScript e como funciona?

Se você está aprendendo desenvolvimento web, aqui está o que você precisa saber sobre JavaScript e como ele funciona com HTML e CSS.

Leia a seguir

Sobre o autor