CSS-Loader-/Spinner-Generator

Escolha um estilo de loader (círculo, pontos, barras, pulsação), personalize cor, tamanho e velocidade, e copie o código HTML e CSS gerado. Sem imagens: apenas CSS puro, gerado e visualizado no seu navegador.

Loader-Stil

Cor

Größe: 48px

Geschwindigkeit: 1s

HTML- + CSS-Code

<style>
.byteryo-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #4f46e533;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: byteryo-spin 1s linear infinite;
}

@keyframes byteryo-spin {
  to { transform: rotate(360deg); }
}
</style>

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

So funktioniert es

Um loader animado em CSS puro é muito mais leve que um GIF e se adapta automaticamente à cor e ao tema da sua interface. Cada estilo oferecido aqui se baseia em uma animação CSS (@keyframes) diferente: rotação contínua para o círculo, defasagem de tempo entre vários elementos para os pontos e as barras, e variação de escala e opacidade para a pulsação.

O código gerado funciona sem JavaScript?

Sim, a animação é totalmente controlada pelo CSS via @keyframes: basta copiar o bloco <style> e o HTML correspondente para a sua página; nenhum script é necessário para o loader girar.

Como exibir o loader apenas durante um carregamento?

Adicione ou remova dinamicamente o bloco HTML do loader (ou alterne uma classe display: none) com o seu framework JavaScript habitual quando uma requisição ou um processamento estiver em andamento, e oculte-o quando o conteúdo estiver pronto.

O código é gerado instantaneamente no seu navegador a partir das suas configurações, sem conexão com nenhum servidor.