Générateur de Loaders CSS

Contrôles

40px
0.8s

Aperçu & CSS

 
   
 
 
   
 
 
 
Comment l'utiliser
 
     
  1. Choisissez un type de loader — Sélectionnez Spinner, Points, Barre ou Pulsation parmi les boutons de préréglage.
    2.  
  2. Choisissez la couleur — Utilisez le sélecteur de couleur pour correspondre à votre marque ou palette UI.
    3.  
  3. Définissez la taille — Faites glisser le curseur de taille entre 20px et 80px.
    4.  
  4. Ajustez la vitesse — Contrôlez la durée de l'animation de 0,3s (rapide) à 2s (lent).
    5.  
  5. Copiez le CSS — Obtenez le CSS complet incluant @keyframes et la classe .loader.
    6.  
 
 
 
Que sont les loaders CSS ?
 
Les loaders CSS sont des animations pure CSS qui indiquent un état de chargement ou de traitement. Ils ne nécessitent ni images, ni JavaScript, ni bibliothèques externes — juste du HTML et du CSS.
 
Chaque loader utilise des @keyframes CSS pour l'animation et des propriétés comme border, transform et opacity pour créer le mouvement. Comme ils utilisent des propriétés adaptées au compositeur, ils sont performants même sur mobile.
 
 
 
Cas d'usage courants
 
 
Récupération de données API
 
Retour d'envoi de formulaire
 
Chargement différé d'images
 
Transitions de page
 
États de chargement de boutons
 
Chargement de contenu en ligne
 
 
Conseils & bonnes pratiques
 
 
 Adaptez à la couleur de votre marque 
Utilisez votre couleur de marque principale pour le loader afin qu'il paraisse intentionnel plutôt que générique. Des versions semi-transparentes de la couleur conviennent bien à la piste des loaders Spinner et Barre.
 
 
 Considérations de vitesse 
Les loaders autour de 0,8–1,2s semblent naturels. Des boucles plus rapides paraissent anxieuses ; plus lentes, paresseuses. Adaptez au temps d'attente attendu si possible.
 
 
 Accessibilité 
Ajoutez role="status" et aria-label="Chargement" au conteneur du loader pour que les lecteurs d'écran annoncent l'état de chargement.
 
 
 Mouvement réduit 
Respectez @media (prefers-reduced-motion: reduce) en masquant le loader ou en passant à un indicateur statique pour les utilisateurs qui préfèrent moins d'animation.
 
 
 
Questions fréquentes
 
 
Quel type de loader utiliser ?
 
Le Spinner est l'indicateur de chargement le plus universellement reconnu. Les Points conviennent aux contextes de chat ou messagerie. La Barre est adaptée aux tâches axées sur la progression. La Pulsation est idéale pour les écrans squelette ou une activité de fond discrète.
 
 
 
Puis-je changer la couleur du loader dynamiquement ?
 
Oui. Remplacez la couleur codée en dur par une propriété personnalisée CSS : --loader-color: #6366f1; et référencez-la dans le CSS du loader. Mettez ensuite à jour la variable via JavaScript ou la cascade.
 
 
 
Ces loaders fonctionnent-ils dans tous les navigateurs ?
 
Oui. Ils utilisent des animations et transformations CSS standard prises en charge par tous les navigateurs modernes, y compris Safari mobile, Chrome, Firefox et Edge.
 
 
 
Comment centrer le loader sur une page ?
 
Enveloppez le loader dans un conteneur avec display: flex; justify-content: center; align-items: center; min-height: 100vh; pour le centrer horizontalement et verticalement.