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);
}
}Anleitung zur Spinner-Erstellung
- 1Wählen Sie Ihren bevorzugten Animationsstil (Drehring, pulsierende Punkte, Wellenbalken).
- 2Passen Sie Geschwindigkeit, Durchmesser und Markenfarbe an.
- 3Kopieren Sie das HTML-Element und die zugehörigen `@keyframes`-CSS-Regeln.
Ruckelfreie UX ohne Blockierung des Main-Threads
Reine CSS-Animationen laufen auf dem GPU-Compositor-Thread und stocken selbst dann nicht, wenn der JavaScript-Thread stark ausgelastet ist.
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.
Häufig gestellte Fragen (FAQ)
Verwandte Entwickler-Tools
Popular
CSS-Glassmorphismus-Generator (Milchglas-Effekt)
Milchglas-Karten mit Unschärfe, Transparenz und Safari-Präfixen erstellen
Launch tool→
Popular
CSS-Box-Shadow-Generator (Mehrstufige Weiche Schatten)
Realistische, mehrschichtige Box-Shadows mit weichem Auslauf und Inset-Tiefe gestalten
Launch tool→
Trending
CSS-Farbverlaufs-Generator (Linear & Radial)
Farbverläufe interaktiv zusammenstellen und als performanten CSS-Code exportieren
Launch tool→
CSS-Border-Radius-Generator (Organische 8-Punkte-Formen)
Organische Blobs und asymmetrische Rundungen mit der 8-Werte-Syntax erzeugen
Launch tool→