Select Loader Animation Pattern
Animation & Dimensions
Size (Width & Height)48px
Stroke / Thickness4px
Cycle Duration1.0s
Accent Color
Real-Time Animated Preview
<!-- HTML -->
<div class="omni-spinner"></div>
/* CSS */
.omni-spinner {
width: 48px;
height: 48px;
border: 4px solid rgba(0, 0, 0, 0.1);
border-top-color: #3b82f6;
border-radius: 50%;
animation: omni-spin 1s linear infinite;
}
@keyframes omni-spin {
to {
transform: rotate(360deg);
}
}Como criar spinners em CSS
- 1Escolha o estilo de animação (anel giratório, pontos pulsantes, barras de onda).
- 2Ajuste o tempo de rotação, tamanho e cor de destaque.
- 3Copie o elemento HTML e as regras CSS `@keyframes`.
Animações Fluidas sem Travar a Thread Principal
Animações em CSS puro rodam na thread do compositor da GPU, mantendo o movimento fluido mesmo durante processamentos em JavaScript.
Architecture & Privacy
- Zero Dependencies: 100% pure CSS and HTML. No external GIF images or JavaScript libraries required.
- Hardware accelerated: Powered by CSS transforms and opacity transitions for smooth 60fps execution.
- Responsive & Scalable: Perfectly crisp on high-DPI Retina screens without pixelation.
- Cross-Browser compatible: Supported on Chrome, Firefox, Edge, Safari, and all mobile browsers.
Perguntas Frequentes (FAQ)
Ferramentas Relacionadas
Popular
Gerador de Glassmorphism CSS (Efeito Vidro Fosco)
Crie cartões translúcidos com efeito de vidro fosco e desfoque em tempo real
Launch tool→
Popular
Gerador de Sombras (box-shadow) CSS em Camadas
Crie sombras suaves, realistas e multicamadas com profundidade inset personalizada
Launch tool→
Trending
Gerador de Gradientes CSS (Linear e Radial)
Crie gradientes lineares, radiais e cônicos com paradas de cores interativas e exportação CSS
Launch tool→
Gerador de Bordas Arredondadas Orgânicas (8 Valores)
Crie formas orgânicas, fluidas e assimétricas usando a sintaxe avançada de 8 valores
Launch tool→