Gerador de Loaders CSS
Gere animações de carregamento CSS puro instantaneamente. Escolha spinner, pontos, barras ou pulso — copie o CSS e HTML e use em qualquer projeto.
① Escolha um tipo de loader ② Ajuste tamanho, cor e velocidade ③ Copie CSS e HTML
Cor
#C9B89A
Velocidade
Como funciona
Cada loader é construído apenas com animações CSS — sem JavaScript ou imagens. O spinner usa rotação de borda, os pontos usam bounce de escala, as barras usam scaleY, e o pulso usa escala com opacidade.
Controlo de velocidade
Lento = 1,5s, Normal = 0,8s, Rápido = 0,4s de duração de animação. Pontos e barras usam animation-delay nos elementos filhos para criar o efeito escalonado.
Pronto a usar
Copie os snippets CSS e HTML, cole-os no seu projeto e o loader funciona imediatamente. Sem dependências, sem frameworks necessários.
Saída CSS
.loader {
width: 48px;
height: 48px;
border: 6px solid #c9b89a33;
border-top-color: #c9b89a;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
Saída HTML<div class="loader"></div>
O que é uma animação de carregamento CSS?
Uma animação de carregamento CSS — também chamada spinner CSS ou loader CSS — é um padrão de UI que indica dados pendentes sem requerer JavaScript ou GIF. O CSS moderno permite animações complexas usando @keyframes com transform, opacity e propriedades border. Padrões comuns incluem spinners (borda rotativa), pontos (círculos saltitantes), barras (rectângulos escalados) e pulso (círculo respirante).
Perguntas frequentes
Um loader CSS é um indicador de carregamento puramente visual implementado com animações CSS e @keyframes — sem JavaScript ou assets de imagem. Sinaliza aos utilizadores que o conteúdo está a ser carregado.
O spinner usa um elemento circular com uma borda transparente excepto num lado colorido. Uma animação @keyframes rotate(360deg) gira o elemento continuamente.
O loader de pontos mostra três círculos que mudam de escala em sequência usando a transformação scale(), criando um efeito de bounce. O loader de barras mostra quatro rectângulos que escalam verticalmente com scaleY().
Para pontos e barras, cada elemento filho tem um valor animation-delay diferente. Isso significa que cada elemento inicia o seu ciclo de animação num momento diferente, criando o aspeto em cascata.
As animações CSS com transform e opacity são aceleradas por GPU em todos os browsers modernos. Evite animar propriedades como width, height que provocam reflow de layout.
Envolva o loader num contentor com display:flex; justify-content:center; align-items:center; Para uma sobreposição de página completa, adicione position:fixed; inset:0.
As animações CSS @keyframes são suportadas em todos os browsers modernos (Chrome, Firefox, Safari, Edge) desde 2013.