Softonic

Gerador de CSS de spinner para botão

Etapa 1 / 2
Próximo

Um spinner dentro de um botão mostra que o clique funcionou e que a pessoa não deve pressionar de novo. Gere aqui um anel pequeno e fino, depois copie o CSS e posicione-o ao lado do texto do botão.

Como fazer um spinner para botão

  1. 1

    Use um tamanho pequeno

    Digite 16 ou 18 no campo de tamanho para que o anel acompanhe a altura do texto do botão.

  2. 2

    Deixe o anel fino

    Defina a espessura como 2 para que o arco continue nítido nesse tamanho.

  3. 3

    Combine a cor

    Escolha a cor do arco em movimento, por exemplo branco em um botão escuro.

  4. 4

    Acelere um pouco e copie

    Experimente 0,8 segundo por volta e, depois, copie o CSS.

Um exemplo prático

Imagine um botão “Salvar” azul-marinho com texto branco. No gerador, informe tamanho 16, espessura 2, cor #ffffff e velocidade 0.8. A ferramenta produz:

.loader {
  width: 16px;
  height: 16px;
  border: 2px solid #eee;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

A trilha do anel é um cinza claro fixo, que aparece bem em um botão escuro. Se quiser uma trilha mais discreta, troque #eee por um valor translúcido como rgba(255, 255, 255, 0.3) no CSS colado. A cor do arco continua sendo a que você escolheu.

Coloque-o dentro do botão

Posicione o elemento do spinner antes do rótulo e transforme o botão em uma linha flex para que os dois fiquem alinhados com um espaço entre eles:

<button class="save" type="submit" disabled>
  <span class="loader" role="status" aria-label="Salvando"></span>
  Salvando
</button>

.save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

Adicione o spinner e o estado disabled somente enquanto a requisição estiver em andamento. Remova os dois quando ela terminar. Desativar o botão é o que evita envios duplicados; o spinner é o sinal que explica o motivo.

Tamanho e espessura para botões

Tamanho do texto do botão Tamanho do spinner Espessura
14 px 14 px 2 px
16 px 16 a 18 px 2 px
18 a 20 px 20 a 24 px 3 px

Observações

  • O gerador cria um único anel circular. Ele não cria o botão, então os estilos do seu botão continuam sendo seus.
  • Um anel mais grosso que um quarto do diâmetro enche e parece um disco, por isso mantenha valores finos em tamanhos pequenos.
  • Mantenha o rótulo ao lado do spinner. Um spinner sem texto pode ser difícil de interpretar para alguns usuários.

Evite saltos no layout

Se o spinner aparece e o botão de repente fica mais largo, o layout se desloca e a área clicável muda de lugar. Duas soluções simples ajudam. Dê ao botão uma largura mínima que já comporte o spinner e o rótulo mais longo. Ou reserve o espaço do spinner desde o início, mostrando um marcador vazio de 16 px antes do rótulo. Como o anel gerado tem largura e altura fixas em pixels, é fácil reservar exatamente o espaço que ele precisa.

Perguntas frequentes

Aproximadamente a mesma altura do texto do botão, normalmente entre 14 e 20 pixels. Assim o botão não cresce quando o spinner aparece.

Sim, na maioria dos formulários. Desativar evita envios duplicados, e o spinner explica ao visitante por que nada mais pode ser clicado.

A trilha é cinza claro e o arco é a cor que você escolher. Em um botão claro, escolha uma cor de arco mais escura e altere a cor da trilha no CSS colado.

Não. O gerador apenas produz o CSS do anel. Manter, trocar ou ocultar o rótulo depende da sua marcação.

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