Comment utiliser : Générateur de loader CSS
- Cliquez sur un loader de la galerie : chaque vignette est animée.
- Ajustez la taille, l’épaisseur, la vitesse et les couleurs ; toutes les vignettes se mettent à jour ensemble.
- Renommez la classe CSS si elle entre en conflit avec votre projet.
- Copiez le HTML et le CSS (ou la version React), puis insérez-les dans votre page.
Pourquoi un loader en CSS pur ?
Un spinner CSS ne pèse que quelques centaines d’octets, ne nécessite ni requête d’image ni JavaScript, reste net à toutes les tailles et se recolore avec une seule variable. Chaque loader proposé ici est construit à partir d’un seul élément (et de quelques spans pour les points et les barres) et animé avec transform et opacity, ce qui garantit une animation fluide même lorsque le thread principal est occupé à charger votre application.
Personnaliser avec les variables CSS
Le CSS généré expose --size, --color, --track, --thickness et --speed sur la classe du loader. Vous pouvez ainsi créer une petite variante blanche pour un bouton sans recopier le CSS : <span class="loader" style="--size:18px;--color:#fff">.
Accessibilité
- Le loader possède un
role="status"ainsi qu’un libellé « Chargement… » masqué visuellement, afin que les lecteurs d’écran l’annoncent. - Lorsque la réduction des animations est activée, l’animation ralentit au lieu de s’arrêter : un spinner figé donne l’impression d’un plantage.
- N’affichez un loader qu’après environ 300 ms ; le faire clignoter pour des requêtes rapides paraît plus lent que de ne rien afficher.
Vous voulez une animation de chargement personnalisée ? Créez-la avec le générateur d’animation CSS et affinez son easing grâce au générateur cubic-bezier.
Aussi recherché comme : loader css, spinner css, animation de chargement css, spinner de chargement css, loader css pur, preloader css, générateur spinner css.
Outils complémentaires : Générateur de loader CSS
- Générateur de dégradé CSS — Concevez un dégradé visuellement : faites glisser les arrêts de couleur, modifiez l’angle ou le type, partez d’un préréglage, puis copiez un CSS prêt pour la production avec une couleur de repli unie.
- Générateur d’ombres CSS — Empilez plusieurs couches d’ombre, ajustez les décalages, le flou, l’étalement et l’opacité sur une carte en direct, puis copiez le CSS box-shadow ou text-shadow.
- Générateur Keyframes CSS — Un éditeur visuel pour @keyframes.
- Générateur d'animations CSS au survol — Concevez des animations au survol pour boutons, cartes, liens et icônes.
Questions fréquentes
Puis-je utiliser ces loaders dans des projets commerciaux ?
Comment afficher le loader uniquement pendant un chargement ?
hidden) dès que les données arrivent. En React, rendez-le de façon conditionnelle : {loading && <Loader />}.Fonctionne-t-il à l’intérieur d’un bouton ?
style="--size:16px;--thickness:2px;--color:currentColor".