Ao visitar um site ou usar um aplicativo, é comum que o usuário precise esperar alguns segundos antes que o conteúdo seja carregado. Para evitar que o usuário fique frustrado durante esse tempo de espera, uma animação de loading é uma solução eficiente e elegante. Neste artigo, vamos explorar as dicas, exemplos e o passo a passo para criar uma animação de loading com CSS.
Caso não entenda muito sobre CSS, recomendamos que também siga para o tutorial “O que é CSS”, pois assim ira conseguir absorver todo o conteúdo.
Conteúdo
Fundamentos da animação de loading com CSS
Antes de mergulharmos nas dicas e exemplos, é importante entender os fundamentos por trás da animação com CSS. Em geral, é criada com a propriedade CSS animation, que define uma animação personalizada para um elemento HTML. A propriedade animation pode ser configurada com várias opções, como duração, tempo, direção e preenchimento.
Existem muitas animações pré-construídas que podem ser encontradas na internet, mas também é possível criar sua própria animação personalizada usando CSS. Aqui você pode encontrar alguns exemplos de animações de loading simples e avançadas feitas com CSS.
Passo a passo para criar animação de loading com CSS
Aqui está um passo a passo simples para criar nossa animação com CSS:
- Crie um elemento HTML para ser o elemento de loading, como uma div vazia.
- Use CSS para estilizar o elemento, incluindo tamanho, posição e cor.
- Defina a animação usando a propriedade CSS animation, incluindo opções como duração, tempo, direção e preenchimento.
- Crie a animação de loading usando a propriedade CSS @keyframes, definindo a aparência do elemento em diferentes pontos.
Exemplo 1: Animação de loading de círculo giratório
Um círculo que gira continuamente no sentido horário, criando um efeito visual de movimento. A cor da borda superior é diferente do resto da borda, criando um destaque que dá um efeito de profundidade ao círculo.
<div class="loader-circle"></div>
.loader-circle {
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px solid #555;
border-top-color: #f8b26a;
animation: loader-circle 1s linear infinite;
}
@keyframes loader-circle {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
Exemplo 2: Animação de loading de pontos escalonados
Três pontos circulares que escalonam continuamente em tamanho em uma animação de loop. Cada ponto tem um atraso calculado, resultando em um movimento escalonada. A escala varia de 1 a 1,5, e cada ponto retorna ao seu tamanho original antes de escalonar novamente.
<div class="loader">
<div class="loader-dot"></div>
<div class="loader-dot"></div>
<div class="loader-dot"></div>
</div>
.loader {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.loader-dot {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #333;
margin: 0 10px;
animation: loader-dot 1.5s infinite ease-in-out;
animation-delay: calc(0.5s);
}
.loader-dot:nth-child(2) {
animation-delay: calc(0.5s + 0.25s);
}
.loader-dot:nth-child(3) {
animation-delay: calc(0.5s + 0.5s);
}
@keyframes loader-dot {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
Exemplo 3: Barra de Progresso Animada
Este exemplo apresenta uma elegante animação de barra de progresso, uma técnica popular para indicar o progresso de uma tarefa ou carregamento de conteúdo em uma página da web. A animação começa com a barra de progresso vazia e, à medida que avança, ela preenche o espaço horizontal de maneira suave.
<div class="loader-container">
<div class="loader"></div>
</div>
.loader-container {
width: 100%;
height: 30px;
background-color: #f3f3f3;
}
.loader {
width: 0;
height: 100%;
background-color: #3498db;
animation: progress 3s ease-in-out infinite;
}
@keyframes progress {
0% { width: 0; }
50% { width: 100%; }
100% { width: 0; }
}
Dicas para criar animação de loading eficiente
Aqui estão algumas dicas para criar animações eficientes:
Seja criativo, mas não exagere
Embora seja importante criar uma animação de loading atraente e que chame a atenção do usuário, é igualmente importante garantir que a mesma não seja muito exagerada ou distraia o usuário do objetivo principal da página. Mantenha a animação simples e sutil, mas ainda assim interessante.
Considere a velocidade da animação
Uma animação de loading muito lenta pode deixar o usuário impaciente e frustrado, enquanto uma muito rápida pode não ser percebida pelo usuário. Encontre o equilíbrio certo e considere o tempo de carregamento médio do conteúdo.
Use cores adequadas
As cores da animação de loading devem ser adequadas ao estilo do site ou aplicativo. Cores vibrantes podem ser atraentes, mas devem ser usadas com cuidado para não sobrecarregar o usuário.
Mantenha a animação consistente
É importante manter a animação de loading consistente em todo o site ou aplicativo, para que o usuário saiba o que esperar. Use a mesma para todas as páginas ou seções que exigem tempo de carregamento.
Conclusão – Como criar animação de loading com CSS puro
Criar animações eficientes e atraentes com CSS pode melhorar significativamente a experiência do usuário ao navegar em sites e aplicativos. Ao seguir as dicas e exemplos apresentados neste artigo, bem como o passo a passo simples, você pode criar suas próprias animações personalizadas de loading para melhorar a experiência do usuário e manter o engajamento.
Como se tornar um desenvolvedor Web?
Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro
Uma resposta