Template de CSS para Loading Spinner: círculos e barras giratórios animados

📝 Uso

Este template é usado para criar um spinner de carregamento, como uma animação de círculo ou barra giratória.

GIF de demonstração

📘 Explicação

Este código usa `@keyframes` para criar um círculo giratório (`spinner-circle`) e uma barra deslizante (`spinner-bar`). Você pode ajustar a velocidade e a cor da animação conforme necessário.

🔹 Código Parcial

<style>
  /* Círculo Giratório */
  .spinner-circle {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
  }

  /* Barra Giratória */
  .spinner-bar {
    width: 50px;
    height: 5px;
    background-color: #3498db;
    animation: bar 1s infinite alternate;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes bar {
    0% { width: 0; }
    50% { width: 50px; }
    100% { width: 0; }
  }
</style>

💻 Código Completo

<div class="spinner-circle"></div>

<div class="spinner-bar"></div>

<style>
  /* Círculo Giratório */
  .spinner-circle {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
  }

  /* Barra Giratória */
  .spinner-bar {
    width: 50px;
    height: 5px;
    background-color: #3498db;
    animation: bar 1s infinite alternate;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes bar {
    0% { width: 0; }
    50% { width: 50px; }
    100% { width: 0; }
  }
</style>

Copiado!

🌀 Técnicas práticas para o uso de spinners de carregamento

Spinners de carregamento criados com animações CSS são elementos importantes de UI que ajudam os usuários a lidar confortavelmente com tempos de espera. A personalização adequada permite criar efeitos que combinam com a imagem da sua marca.

🎨 Personalização do design

Partindo da animação básica de rotação, alterar a border-top-color para um gradiente proporciona uma impressão moderna. Além disso, adicionar animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1) cria um movimento mais natural. A cor pode ser alterada não apenas do #3498db (azul), mas também para combinar com as cores temáticas do site.

⏱️ Otimização de desempenho

Para manter as animações suaves, recomenda-se adicionar a propriedade will-change: transform. Ao exibir vários spinners, escalonar o animation-delay cria um efeito visualmente mais rico.

📱 Design responsivo

Em dispositivos móveis, reduzir o tamanho (width: 30px) e encurtar a duração da animação (animation-duration: 1s) permite uma exibição compacta e eficiente. Para temas com fundo escuro, ajuste a border-color para uma cor mais clara.

Spinners de carregamento são importantes para melhorar a experiência do usuário, mas é preciso tomar cuidado para não complicá-los demais ou deixá-los exibidos por muito tempo. Procure designs simples, claros e que combinem com a atmosfera geral do seu site.