O conteúdo do seu site ainda não foi carregado, mas você não quer que os visitantes percam o interesse clicando. O que você deveria fazer? Use uma tela de esqueleto.
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 o deslocamento cumulativo de layout (CLS), permitindo que o conteúdo seja exibido de uma só vez, em vez de sequencialmente, à medida que 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 escreva algum HTML para o layout dentro de um <div> pai com class = ”profile-container” . Adicione class = ”esqueleto” a cada elemento para aplicar o efeito de carregamento de tela do esqueleto. Você removerá essa classe quando o conteúdo for carregado usando JavaScript.
Nota : Não se esqueça de vincular os arquivos CSS e JavaScript no cabeçalho do seu arquivo index.html .
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Skeleton Screen Loading Effect</title>
</head>
<body>
<div class="profile-container">
<div class="profile-images">
<div class="cover-img skeleton">
<img src="./image/linkedin banner.jpg">
</div>
<div class="profile-img skeleton">
<img src="./image/user-profile.jpg" alt="Photo by Ian Dooley on Unsplash">
</div>
</div>
<div class="profile-text">
<h1 class="skeleton">John Doe</h1>
<p class="skeleton">Software Engineer @ Google || Full Stack Developer || Self Taught</p>
<h5 class="skeleton">Bengaluru, Karnataka, India • <a class="skeleton" href="/">Contact info</a></h5>
<p class="skeleton"><a class="skeleton" href="/">534 connections</a></p>
</div>
<div class="profile-cta">
<a class="message-btn skeleton" href="/">Message</a>
<a class="more-btn skeleton" href="/">More</a>
</div>
</div>
<script src="script.js"></script>
</body>Comece a estilizar sua página
Aplique os atributos CSS básicos como margem , família da fonte e cor em todo o corpo.
body {
margin: 0;
font-family: Arial;
color: rgba(255, 255, 255, 0.9);
}Adicionar efeito de carregamento
Para adicionar um efeito de carregamento, adicione um pseudo-elemento :: after à 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 {
position: relative;
width: max-content;
overflow: hidden;
border-radius: 4px;
background-color: #1e2226 !important;
color: transparent !important;
border-color: #1e2226 !important;
user-select: none;
cursor: default;
}
.skeleton img {
opacity: 0;
}
.skeleton::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(
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)
);
animation: shimmer 2s infinite;
content: '';
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
Estilize as imagens
Agora, vamos estilizar o perfil e a imagem da capa. Não se esqueça de definir overflow: hidden; para evitar inconsistências.
img {
width: 100%;
vertical-align: middle;
}
.profile-container {
width: 95%;
max-width: 780px;
margin: 0 auto;
border-radius: 8px;
margin-top: 32px;
background-color: #1e2226;
overflow: hidden;
position: relative;
}
.cover-img {
width: 100%;
overflow: hidden;
background-color: #1e2226;
aspect-ratio: 4 / 1;
}
.profile-img {
border-radius: 50%;
width: 160px;
height: 160px;
border: 4px solid #000;
background-color: #1e2226;
margin: 0 auto;
position: relative;
overflow: hidden;
bottom: 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, você deve aprender como usar consultas de mídia em HTML e CSS porque eles são muito importantes na construção de sites responsivos.
@media (max-width: 560px) {
.profile-img {
width: 100px;
height: 100px;
bottom: 60px;
}
}Estilizar o texto
Defina o estilo do texto definindo uma margem , tamanho e espessura da fonte . Você também pode alterar a cor do texto, adicionar um título, parágrafo ou tag âncora <a> 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 {
margin-top: -80px;
padding: 0 16px;
}
.profile-text h1 {
margin-bottom: 0;
font-size: 24px;
overflow: hidden;
}
.profile-text p {
margin: 4px 0;
overflow: hidden;
}
.profile-text h5 {
margin-top: 4px;
font-size: 14px;
margin-bottom: 8px;
font-weight: 400;
color: #ffffff99;
overflow: hidden;
}
.profile-text a {
color: #70b5f9;
font-size: 14px;
text-decoration: none;
font-weight: 600;
}
.profile-text a:hover {
color: #70b5f9;
text-decoration: underline;
}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 {
padding: 16px 16px 32px;
display: flex;
}
.profile-cta a {
padding: 6px 16px;
border-radius: 24px;
text-decoration: none;
display: block;
}
.message-btn {
background-color: #70b5f9;
color: #000;
}
.more-btn {
color: inherit;
border: 1px solid rgba(255, 255, 255, 0.9);
margin-left: 8px;
}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 <script src = “script.js”> </script> pouco antes do final da seção <body> .
const skeletons = document.querySelectorAll('.skeleton')
skeletons.forEach((skeleton) => {
setTimeout(() => {
skeleton.classList.remove('skeleton')
}, 4000)
})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.