Utilitarioz
⏳

CSS Loaders e Spinners

Galeria de loaders e spinners feitos em CSS puro. Selecione um modelo, customize a cor e copie o código pronto.

#6366f1
Tamanho32px
Borda GiratóriaSpinner
<!-- Borda Giratória -->
<div class="loader"></div>

<style>
#7dd3fc">color:#6b7280">/* Borda Giratória — utilitarioz.com.br */
#7dd3fc">color:#c084fc">color:#c084fc">@keyframes spin-border {
  to { #7dd3fc">transform: rotate(360deg); }
}
.loader {
  #7dd3fc">width: 32px;
  #7dd3fc">height: 32px;
  #7dd3fc">border: 4px solid #6366f133;
  #7dd3fc">border-top-color: #6366f1;
  #7dd3fc">border-radius: 50%;
  #7dd3fc">animation: spin-border 0.8s linear infinite;
}
</style>

Ferramentas Relacionadas

✨
Novo

Gerador de Efeitos de Texto CSS

Crie efeitos visuais em texto com sombras, contornos e gradientes CSS.

👨‍💻 DesenvolvedorAbrir
🎨
NovoDestaque

Gerador de Gradiente CSS

Crie gradientes CSS lineares e radiais com preview ao vivo e código pronto para copiar.

👨‍💻 DesenvolvedorAbrir
🌑
Novo

Gerador de Sombras CSS

Crie box-shadows CSS com preview ao vivo. Ajuste offset, blur, spread e cor.

👨‍💻 DesenvolvedorAbrir

A biblioteca de CSS Loaders do Utilitarioz oferece animações de carregamento (spinners, dots, bars, pulse) prontas para copiar — sem JavaScript, apenas CSS puro. Personalize cores e tamanho para combinar com seu design.

Tipos de loading animation

  • ▸Spinner circular — o mais comum, roda continuamente
  • ▸Dots pulsantes — três pontos animados
  • ▸Progress bar — barra de progresso indeterminada
  • ▸Skeleton loading — placeholder de conteúdo em carregamento
  • ▸Pulse — elemento que expande e contrai

Perguntas Frequentes — CSS Loaders e Spinners

CSS loaders consomem performance?

Loaders que usam apenas transform e opacity são composted pelo GPU e têm impacto mínimo. Evite animar margin, padding e width que causam reflow.