Générateur de spinneurs CSS Générer des spinneurs de chargement CSS et des chargeurs animés avec des styles personnalisables.
Générateur de spinneurs CSS
Générer des spinneurs de chargement CSS et des chargeurs animés avec des styles personnalisables.
Choisissez le type de spinner
Sélectionnez parmi les styles de spinners border, dots, pulse ou ring.
Personnalisez l'apparence
Ajustez la couleur, la taille, la largeur du bord et la vitesse d'animation.
Copiez le code
Prévisualisez le spinner animé et copiez le code HTML et CSS.
What Is Générateur de spinneurs CSS?
Le générateur de spinner CSS crée des indicateurs de chargement animés à l'aide du seul CSS. Les spinners de chargement fournissent une rétroaction visuelle aux utilisateurs pendant les opérations asynchrones comme la récupération de données, le téléchargement de fichiers ou les transitions de page. Cet outil propose quatre styles de spinner distincts : border spinner (cercle rotatif classique), dots (points qui rebondissent), pulse (cercle en expansion) et ring (anneau rotatif). Chaque style est entièrement personnalisable avec des contrôles pour la couleur, la taille, l'épaisseur de la bordure et la vitesse d'animation. Le code généré comprend à la fois le balisage HTML et le CSS avec les définitions d'animation @keyframes. Tous les spinners sont légers, performants et ne nécessitent aucun JavaScript ou bibliothèque externe. Ils fonctionnent sur tous les navigateurs modernes et s'intègrent facilement dans n'importe quel projet Web.
Why Use Générateur de spinneurs CSS?
Common Use Cases
États de chargement des données
Affichez des spinners pendant le chargement des données à partir d'API ou de bases de données.
Rétroaction sur la soumission de formulaires
Affichez un spinner sur les boutons de soumission pendant le traitement du formulaire.
Transitions de page
Utilisez des spinners pendant la navigation ou les changements de route dans les applications monopages (SPAs).
Chargement différé de contenu
Affichez des indicateurs de chargement pendant le chargement d'images ou de composants.
Technical Guide
Les spinners CSS utilisent des animations @keyframes pour créer un mouvement continu. La technique du border spinner utilise un élément circulaire avec une bordure transparente sur la plupart des côtés et une bordure colorée sur un côté, puis le fait tourner de 360 degrés. L'animation des points utilise des transformations d'échelle pour créer un effet de rebond avec un délai d'animation décalé. L'animation du pulse met à l'échelle un élément de 0 à 1 tout en faisant disparaître l'opacité. Toutes les animations utilisent animation : name duration timing-function iteration-count. La définition de iteration-count sur infinite assure une boucle continue. La fonction d'horloge d'animation (ease, linear, ease-in-out) contrôle la courbe de vitesse. Pour l'accessibilité, ajoutez role="status" et un aria-label aux spinners. Envisagez d'utiliser la requête média prefers-reduced-motion pour désactiver ou réduire les animations pour les utilisateurs qui préfèrent une animation réduite.
Tips & Best Practices
-
1Utilisez animation-timing-function : linéaire pour une rotation constante et fluide
-
2Ajoutez la requête média prefers-reduced-motion pour l'accessibilité
-
3Gardez la taille du spinner appropriée - 48px est standard, 24px pour les éléments intégrés
-
4Utilisez aria-label="Chargement" pour l'accessibilité des lecteurs d'écran
Related Tools
Zone de jeu des transformations CSS
Expérimentez avec les transformations CSS, y compris la rotation, l'échelle, la déformation et la translation avec une perspective 3D.
🎨 CSS & Design
Générateur d'animations CSS
Créez des animations de trames clés CSS avec des effets prédéfinis et une temporisation personnalisable.
🎨 CSS & Design
Générateur de transitions CSS
Gérez les transitions CSS avec des propriétés, durées, effets d'assouplissement et effets au survol personnalisables.
🎨 CSS & Design
Générateur de boîtes de rapport d'aspect
Générer des boîtes de rapport d'aspect réactives avec les approches CSS modernes et héritées.
🎨 CSS & DesignFrequently Asked Questions
Q Les spinners CSS sont-ils accessibles ?
Q Puis-je changer la direction de rotation ?
Q Comment centrer le spinner sur la page ?
Q Les spinners CSS fonctionneront-ils dans les anciens navigateurs ?
Q Comment modifier la vitesse d'animation ?
About This Tool
Générateur de spinneurs CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.