Animação de loading com CSS: Dicas, exemplos e tudo que precisa saber

Animação de loading com CSS: Dicas, exemplos e tudo que precisa saber

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:

  1. Crie um elemento HTML para ser o elemento de loading, como uma div vazia.
  2. Use CSS para estilizar o elemento, incluindo tamanho, posição e cor.
  3. Defina a animação usando a propriedade CSS animation, incluindo opções como duração, tempo, direção e preenchimento.
  4. 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?

Não é necessário ter um certificado ou formação específica para ser um desenvolvedor web. Porque o importante é obter conhecimentos teóricos e práticos sobre programação, e assim irá adquirir experiência para entrar no mercado de programação 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

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Pratique, acesse o editor HTML
mokup phone
Aprenda a desenvolver para a web de graça!

Cadastrar agora

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.

Pesquisa
*A busca não retorna histórias,
para isso visite a página histórias
Digite aqui para obter os resultados da pesquisa!
Ebook Criar com HTML e CSS - Mukup

Cadastrar agora

Aprenda a desenvolver para a web de graça! Mais ebook de bônus.

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.