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);
}
}Cómo crear spinners en CSS
- 1Elige el estilo de animación (anillo giratorio, puntos pulsantes, barras de onda).
- 2Ajusta la velocidad de rotación, el diámetro y el color de acento.
- 3Copia el elemento HTML y las reglas CSS `@keyframes`.
Animaciones Fluidas sin Bloquear el Hilo Principal
Las animaciones CSS puras corren en el hilo del compositor de la GPU, garantizando movimiento fluido incluso durante operaciones pesadas de 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.
Preguntas Frecuentes (FAQ)
Herramientas Relacionadas
Popular
Generador de Glassmorphism CSS
Diseña tarjetas con efecto de cristal esmerilado con desenfoque en tiempo real
Launch tool→
Popular
Generador de Sombras (box-shadow) CSS
Diseña sombras multicapa realistas y suaves con profundidad inset personalizable
Launch tool→
Trending
Generador de Degradados CSS
Crea degradados lineales, radiales y cónicos con controles de color interactivos
Launch tool→
Generador de Bordes Redondeados CSS
Modela formas orgánicas y asimétricas usando la sintaxis avanzada de 8 valores
Launch tool→