Gerador de Spinner CSS para Loaders e Animações de Carregamento
O gerador de spinner CSS transforma 43 modelos feitos à mão em animações de carregamento prontas para copiar, então você nunca precisa escrever keyframes do zero. Explore a galeria, ajuste a cor, o tamanho e a velocidade e copie um HTML e um CSS limpos para o seu projeto.
Foi feito para desenvolvedores front-end e designers que precisam de um indicador de carregamento rápido e sem dependências — um spinner, dots, bars, um pulse, uma barra de progresso ou uma forma animada. Cada modelo é em CSS puro, então não há JavaScript, nenhum arquivo de imagem e nenhuma biblioteca para instalar.
Como Gerar um Loader em CSS
Explore e escolha um loader
Use as abas de categoria — Todos, Spinner, Dots, Bars, Pulse, Progress e Formas — para filtrar a galeria. Cada miniatura anima ao vivo, então clique na que você gostar ou toque em Aleatório para cair em uma nova opção.
Ajuste cor, tamanho e velocidade
Abra o seletor de cor para definir qualquer cor do loader, arraste o controle Tamanho entre 20px e 120px e defina a Velocidade (duração da animação) de 0,3s a 3,0s. A pré-visualização ao vivo se atualiza na hora a cada mudança.
Confira em qualquer fundo
Alterne a pré-visualização entre os fundos Claro, Escuro e Transparente. A visão transparente em xadrez ajuda a confirmar que o loader fica limpo sobre a sua página, sem nenhum fundo perdido.
Copie o HTML e o CSS
Alterne entre as abas HTML e CSS e clique em Copiar. O CSS já vem com a sua cor exata, o tamanho em pixels e o tempo embutidos, então cole a marcação na sua página e os estilos na sua folha de estilos — pronto.
Recursos
43 Modelos de Loader Selecionados
Uma coleção feita à mão que cobre tudo, de simples anéis girando a cubos 3D animados, cada um pronto para usar em produção.
Seis Categorias de Loader
Filtre por Spinner, Dots, Bars, Pulse, Progress ou Formas, ou veja todas em uma única galeria para achar o estilo certo rápido.
Galeria Animada ao Vivo
Cada miniatura na grade roda a sua animação real, então você vê cada loader em movimento antes de decidir.
Seletor de Cor
Combine com a sua marca definindo qualquer cor para o loader, aplicada a todas as partes da animação de uma vez.
Controle de Tamanho e Velocidade
Dimensione o loader de 20px a 120px e ajuste a duração da animação de um rápido 0,3s a um lento 3,0s.
Pré-visualização Clara, Escura e Transparente
Troque o fundo da pré-visualização para verificar se o loader continua visível e limpo em qualquer contexto de página.
Abas Separadas de HTML e CSS
O código é dividido em marcação mínima e estilo, então você cola cada parte exatamente onde ela pertence.
Saída Pronta para Produção
O CSS gerado usa valores resolvidos — pixels, cores e tempos exatos — em vez de variáveis, pronto para colar sem nenhuma configuração extra.
Cópia com Um Clique
Copie a aba HTML ou CSS ativa direto para a área de transferência com um único botão e uma confirmação clara.
Sorteio Aleatório de Loader
Toque em Aleatório para cair na hora em outro loader dentro da categoria que você está explorando, para inspiração rápida.
CSS Puro, Sem JavaScript
Cada loader roda só com keyframes de CSS — sem scripts e sem imagens — então fica leve e rápido.
Layout Responsivo
A galeria, a pré-visualização e os painéis de código se adaptam à sua tela, então funciona igual no desktop e no celular.
Perguntas Frequentes
Como criar um spinner de carregamento com CSS?
Escolha um modelo na galeria, ajuste a cor, o tamanho e a velocidade ao seu gosto e copie as abas HTML e CSS para o seu projeto. A animação do spinner começa a funcionar assim que você cola a marcação na sua página e os estilos na sua folha de estilos.
Dá para fazer um spinner só com CSS, sem JavaScript?
Sim. Cada loader aqui é feito inteiramente com animações @keyframes de CSS. Você só precisa da marcação HTML e dos estilos CSS — nenhum JavaScript e nenhum arquivo de imagem são necessários para a animação rodar.
Como mudar a cor e a velocidade do spinner?
Use os controles do gerador: o seletor de cor define a cor do loader e o controle Velocidade define a duração da animação de 0,3s a 3,0s. Depois de copiar, você ainda pode editar os valores no CSS — encontre a cor (por exemplo #6366f1) ou a duração em segundos e altere diretamente.
Como centralizar um spinner na página?
Coloque o loader em um contêiner de altura total e use flexbox, por exemplo display: flex; align-items: center; justify-content: center; com um min-height definido para a área que você quer preencher. Para uma sobreposição em tela cheia, posicione esse contêiner com position: fixed; inset: 0; para que o spinner fique no centro da viewport.
Qual a diferença entre um loader e um spinner?
"Loader" é o termo geral para qualquer indicador de carregamento, enquanto um "spinner" é um tipo comum — um anel ou arco que gira. Esta ferramenta cobre os dois: a categoria Spinner reúne os clássicos loaders giratórios, e as categorias Dots, Bars, Pulse, Progress e Formas oferecem outros estilos de carregamento para a mesma função.
Posso mudar a cor do loader depois de copiar o código?
Sim. O CSS gerado usa um valor de cor explícito, então você pode localizá-lo e substituí-lo no CSS a qualquer momento. Para um tema mais fácil, troque essa cor por uma propriedade personalizada de CSS como var(--loader-color) e controle tudo de um único lugar.
Quais navegadores suportam esses loaders?
Todos os loaders funcionam em navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. Eles dependem de recursos de CSS amplamente suportados, como @keyframes, border-radius e transform.
Os loaders são livres para uso em projetos comerciais?
Sim. O CSS que você copia é seu para usar em qualquer projeto, inclusive em trabalhos comerciais, sem exigir atribuição.
Ainda não há comentários. Seja o primeiro a comentar!