Gerador de Loaders CSS
O gerador de loader CSS cria animações de carregamento em CSS puro em seis estilos (spinner, pontos saltitantes, anel, pulso, barras e anel duplo), com tamanho, cor, velocidade e espessura ajustáveis, e gera tanto o CSS quanto o HTML.
Sobre esta ferramenta
O gerador de loader CSS cria animações de carregamento em CSS puro em seis estilos (spinner, pontos saltitantes, anel, pulso, barras e anel duplo), com tamanho, cor, velocidade e espessura ajustáveis, e gera tanto o CSS quanto o HTML.
Como usar
- Escolha um estilo de loader.
- Ajuste o tamanho, a cor, a velocidade e a espessura.
- Confira a prévia ao vivo.
- Clique em Copiar CSS + HTML e cole os dois na sua página.
Bom saber
- Loaders em CSS puro não precisam de imagens, GIFs nem JavaScript.
- Os spinners giram com @keyframes e transform: rotate(), que é eficiente de animar.
- A marcação é um único elemento, ou alguns elementos filhos para os pontos e as barras.
- Adicione role="status" e um rótulo visualmente oculto como “Carregando…” para que os leitores de tela anunciem o loader.
- Considere desacelerar ou pausar os loaders com prefers-reduced-motion.
Funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado.
Perguntas frequentes
Como fazer um spinner de carregamento em CSS?
Dê a um elemento quadrado uma borda com um lado colorido, border-radius: 50% e uma animação @keyframes de rotação, ou copie um deste gerador.
Loaders CSS são melhores que GIFs?
Normalmente sim: são mais leves, ficam nítidos em qualquer tamanho e você pode mudar a cor e a velocidade com CSS.
Como deixar um loader acessível?
Coloque-o dentro de um elemento com role="status" e inclua um texto oculto como “Carregando…” para que as tecnologias assistivas possam anunciá-lo.
Como centralizar o loader na página?
Coloque-o em um contêiner com display: flex; justify-content: center; align-items: center;.