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);
}
}Comment créer des loaders CSS
- 1Sélectionnez votre style d'animation préféré (anneau tournant, points pulsants, barres).
- 2Ajustez la durée de rotation, la taille et la couleur d'accent.
- 3Copiez l'élément HTML et les règles CSS `@keyframes`.
Animations Fluides Hors du Thread Principal
Les animations CSS s'exécutent sur le thread de composition du GPU et ne saccadent pas, même si le thread JavaScript principal est sollicité.
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.
Foire Aux Questions (FAQ)
Outils Similaires
Popular
Générateur de Glassmorphisme CSS (Effet Verre Dépoli)
Concevez des cartes en verre translucide avec flou d'arrière-plan en temps réel
Launch tool→
Popular
Générateur d'Ombres CSS Multicouches (box-shadow)
Créez des ombres portées réalistes, diffuses et élégantes avec profondeur inset
Launch tool→
Trending
Générateur de Dégradés CSS (Linéaire & Radial)
Composez des dégradés linéaires, radiaux et coniques avec export CSS instantané
Launch tool→
Générateur de Rayon de Bordure CSS Organique (8 Valeurs)
Créez des formes organiques et asymétriques grâce à la syntaxe avancée à 8 valeurs
Launch tool→