Gerador de loaders CSS

O que é Gerador de loaders CSS?

O Gerador de Loaders CSS é uma ferramenta gratuita no navegador para web designers e desenvolvedores front-end que precisam de um indicador de carregamento em CSS puro sem adicionar uma biblioteca. Escolha entre cinco estilos - spinner, anel, pontos, barras e pulso - e controle o tamanho em pixels, a cor principal, a velocidade de um ciclo de animação em segundos, a espessura do traço e a quantidade de pontos ou barras. Uma prévia anima enquanto você edita, e a marcação HTML junto com um bloco de estilo CSS com @keyframes é atualizada instantaneamente para você colocá-la diretamente em uma página. Use-a para botões, loaders de página, estados esqueleto e espaços reservados assíncronos, ou para aprender como a animação CSS e o @keyframes movem cada efeito.

Como usar Gerador de loaders CSS

1. Escolha um estilo de loader: Spinner, Anel, Pontos, Barras ou Pulso.
2. Defina o tamanho em pixels e escolha uma cor com a amostra ou digitando um valor.
3. Defina a velocidade da animação em segundos para um ciclo completo.
4. Abra as Configurações para ajustar a espessura do traço (spinner e anel) ou o número de pontos ou barras.
5. Observe a animação da prévia em tempo real e copie o HTML e o CSS gerados com o botão de copiar.

Exemplos

Estilo: Spinner, tamanho 48px, cor #4f86f7, velocidade 1s, espessura 5px

.dd-loader { width: 48px; height: 48px; border: 5px solid color-mix(in srgb, #4f86f7 25%, transparent); border-top-color: #4f86f7; border-radius: 50%; animation: dd-loader-spin 1s linear infinite; }

Estilo: Pontos, tamanho 48px, cor #9333ea, velocidade 1s, quantidade 3

<div class="dd-loader"><div></div><div></div><div></div></div> com animation-delay escalonado para que os pontos escalem em onda.

Perguntas frequentes

Quais estilos de loader estão disponíveis?

Cinco: Spinner (um arco que gira), Anel (um anel giratório mais grosso), Pontos (pontos que escalam em onda), Barras (barras que se esticam para cima e para baixo) e Pulso (um único círculo que pulsa). Troque pelo menu de estilo e a prévia e o código se atualizam instantaneamente.

O que fazem os controles de tamanho, cor e velocidade?

O tamanho define as dimensões do loader em pixels, a cor define a cor principal (use o seletor ou digite qualquer cor CSS) e a velocidade é a duração de um ciclo de animação em segundos. A espessura controla o traço do spinner e do anel, enquanto a quantidade controla quantos pontos ou barras aparecem.

O CSS gerado é CSS puro sem JavaScript?

Sim. O trecho é HTML simples mais um bloco <style> usando animação CSS e @keyframes, então funciona sem nenhum JavaScript ou biblioteca externa. Cole na sua página e ele funciona por conta própria.

Por que a espessura e a quantidade não mudam todos os estilos?

A espessura afeta apenas o spinner e o anel (que desenham uma borda), enquanto a quantidade afeta apenas pontos e barras (que renderizam vários elementos). Os outros estilos os ignoram, então a saída permanece limpa para o estilo que você escolheu.

Algo é enviado a um servidor?

Não. O loader e seu CSS são construídos inteiramente no seu navegador com cálculo local de strings - nenhuma configuração, cor ou código é enviado a um servidor, então funciona offline e mantém seu trabalho privado.