Softonic

Gerador de spinner CSS simples

Etapa 1 / 2
Próximo

O spinner CSS mais simples precisa de um único elemento vazio e cerca de dez linhas de CSS. Escolha aqui o tamanho, a cor e a velocidade e copie um loader limpo e mínimo, sem arquivos extras.

Como obter um spinner simples

  1. 1

    Comece com os padrões

    O anel predefinido de 60 px, com borda de 6 px e uma volta de 1 segundo, já funciona como loader geral.

  2. 2

    Altere apenas o necessário

    A maioria dos projetos só precisa de outra cor. Use o campo de cor e deixe o restante como está.

  3. 3

    Copie o CSS

    Pressione copiar ao lado da caixa de CSS.

  4. 4

    Adicione um elemento

    Coloque uma div vazia com a classe loader onde o spinner deve aparecer.

Por que este spinner é simples

Muitos loaders usam vários elementos aninhados, imagens de fundo ou script. Este é um único div estilizado como círculo. O anel é formado por uma borda, e só a parte de cima da borda tem outra cor. Ao girar o círculo, essa parte colorida percorre o contorno. Toda a técnica se resume a quatro ideias:

  1. Uma caixa quadrada, com largura e altura iguais.
  2. border-radius: 50% para transformar a caixa em círculo.
  3. Uma borda cinza com um único lado colorido, via border-top-color.
  4. Uma animação de rotação que nunca para.

O código completo

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

<div class="loader"></div>

Esse é todo o loader. Não há nada para baixar nem dependência para manter atualizada.

Centralizando

O anel é um elemento de bloco normal. Para centralizá-lo na página ou dentro de um contêiner, adicione margin: 0 auto; a .loader para centralizar horizontalmente, ou torne o elemento pai um contêiner flex:

.loading-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

O que esta ferramenta não faz

  • Gera apenas o estilo do anel. Fileiras de pontos, barras e loaders de pulsação são outros designs.
  • A cor da trilha é um cinza claro fixo; edite-a no CSS colado se o seu fundo for escuro.
  • Não adiciona atributos de acessibilidade à sua marcação. Adicione você mesmo role="status" e um aria-label ao elemento.

Pequenos ajustes depois de copiar

Como o spinner tem poucas propriedades, editá-lo é fácil. Para deixar o anel mais leve, reduza a largura da borda. Para deixá-lo mais calmo, aumente o tempo da animação. Para usar o mesmo loader em dois tamanhos, copie a classe uma vez e sobrescreva apenas width, height e border-width em uma segunda classe. Manter o código tão curto é a principal vantagem de um spinner simples: você lê tudo de uma vez e altera qualquer valor sem procurar em uma biblioteca.

Você também pode tingir a trilha trocando #eee por uma cor que combine com a sua página, enquanto o arco em movimento mantém a cor que você escolheu no gerador.

Perguntas frequentes

O spinner gerado usa uma classe de dez linhas e uma regra de keyframes de três linhas. Isso é suficiente para um loader funcional.

Não. O anel é desenhado com uma borda e uma rotação, então não há arquivo de imagem nem ícone para carregar.

Largura e altura precisam ser iguais. Este gerador usa o mesmo tamanho para as duas, então um oval normalmente indica outra regra no seu projeto sobrescrevendo uma delas.

O elemento gerado é vazio. Você pode colocar texto ao lado dele, ou envolver os dois em um contêiner, mas o anel em si é apenas um círculo com borda.

Ferramentas relacionadas

Contador de FPS

Meça o FPS do navegador com requestAnimationFrame: suavização, taxa de quadros mínima e máxima, limite de alerta e gráfico opcional. Roda localmente, sem upload nem API.

Gerador de Configuração Webpack

Crie um webpack.config.js para webpack 5 com JavaScript puro, React ou Vue: TypeScript, Babel, CSS ou Sass, imagens, HtmlWebpackPlugin, servidor de desenvolvimento e a linha de npm install.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de textura de ruído

Gere uma textura de ruído em SVG que se repete sem emendas, com opacidade, frequência do grão, tipo de ruído e cor de fundo ajustáveis, e copie o CSS já pronto.

Gerador de Licença

Gere o texto completo de licenças de código aberto com seu nome e ano preenchidos. Abrange licenças MIT, Apache 2.0, GPLv3, BSD-3, MPL-2.0 e CC.

Desofuscador de JavaScript

Desofusque JavaScript minificado ou empacotado com renomeação de variáveis, decodificação de arrays de strings, reversão de achatamento de fluxo de controle e embelezamento.

Ferramenta disponível em outros idiomas

Guias e casos de uso