LocalToolsColeção de ferramentas offline para navegador

Categoria: Desenvolvimento

Gerador de spinner de carregamento CSS

Ideia nossaFalta uma ferramenta?

Projete indicadores de carregamento CSS leves localmente e copie o código

Crie spinners de carregamento só com CSS e prévia ao vivo. Ajuste tamanho, cor, espessura e velocidade e copie os trechos de HTML e CSS. Sem JavaScript e sem imagens.

Prévia

HTML
<span class="loader" role="status" aria-label="Carregando…"></span>
CSS
.loader {
  display: inline-block;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 4px solid #dfe4de;
  border-top-color: #2f6f4f;
  border-radius: 50%;
  animation: loader-spin 0.9s linear infinite;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader span {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

Cada trecho anima apenas transform e opacity e termina com um bloco prefers-reduced-motion, para que a animação pare para quem pediu ao sistema para reduzir o movimento.

Sem JavaScript, sem imagens, sem fontes web — e nada sai do seu navegador.

Tudo nesta página é processado no seu navegador. Nada é enviado.

Para que serve

Um indicador de carregamento é um dos poucos lugares em que algumas linhas de CSS ganham de uma biblioteca com folga: não há script para carregar, imagem para requisitar nem nada para inicializar antes daquilo que você está esperando. Estes cinco modelos — anel, anel duplo, pontos, barras e pulso — animam apenas `transform` e `opacity`, então o navegador pode executá-los no compositor em vez de recalcular o layout a cada quadro. Cada trecho termina com um bloco `prefers-reduced-motion`, porque um spinner é decoração e quem pediu ao sistema para parar de mover coisas não deveria ter que ficar olhando. A marcação é um `<span role="status">` com rótulo, para que um leitor de tela anuncie a espera em vez de encontrar uma caixa vazia.

Como usar

  1. Escolha um modelo e ajuste tamanho, espessura, velocidade e cores.
  2. Renomeie a classe se ela puder conflitar com sua folha de estilos.
  3. Copie o HTML e o CSS para o seu projeto.

Privacidade

Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.

Perguntas frequentes

Os spinners são só CSS?
Sim. Cada um é um span (com alguns spans filhos vazios nos modelos de pontos e barras) mais uma animação CSS. Não há JavaScript, SVG, imagem nem fonte web.
Preciso de JavaScript para executá-los?
Não. A animação começa assim que o elemento está no documento. Você só precisa de código para decidir quando mostrar e esconder.
Posso mudar a velocidade e a cor?
Sim — tamanho, espessura do traço, duração da animação, cor principal e cor do trilho são todos controles aqui, e são escritos direto no trecho que você copia.
E quem prefere menos movimento?
Todo trecho gerado termina com uma media query prefers-reduced-motion que na prática interrompe a animação, então o indicador ainda aparece, mas não gira para quem reduziu o movimento no sistema.
O código é gerado localmente?
Sim. As configurações, a prévia e os trechos gerados ficam no seu navegador; nada é enviado.

Voltar para todas as ferramentas