Crie Carregadores CSS Bonitos

Gere animações de carregamento CSS personalizadas em segundos com nossa interface intuitiva de arrastar e soltar. Não é necessário escrever nenhuma linha de código!

Personalize seu carregador

Tipo de carregador

Color

Size 40px

Speed 1s

Opções avançadas

Preview

.loader { border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #165DFF; width: 40px; height: 40px; animation: spin 1s linear infinite; }  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

Modo de Utilização

Personalize seu carregador usando os controles à esquerda
Clique no botão "Gerar CSS"
Copie o código HTML e CSS gerado
Cole-o em seu projeto

Exemplos populares de carregadeiras

Carregador de pulso

3 Dots Fácil de implementar

Carregador giratório

Classic 100% CSS

Dual Ring

Círculo Duplo Estilo moderno

Carregador de rejeição

Pontos saltitantes Animação suave

Carregador de anel

Anel com ponto Design exclusivo

Carregador de balança

Pontos de escala Lightweight

Como usar carregadores CSS

Implementação básica

Usar os carregadores CSS gerados por esta ferramenta é simples. Basta copiar o código HTML e CSS gerado em seu projeto.

Etapa 1: adicionar o CSS

Add the generated CSS code to your stylesheet or in a