Générateur de Loaders CSS
Générez des animations de chargement CSS pur instantanément. Choisissez spinner, points, barres ou pulsation — copiez le CSS et HTML et intégrez-les dans n'importe quel projet.
① Choisissez un type de loader ② Ajustez taille, couleur et vitesse ③ Copiez CSS et HTML
Couleur
#C9B89A
Vitesse
Comment ça marche
Chaque loader est construit uniquement avec des animations CSS — pas de JavaScript ni d'images. Le spinner utilise la rotation de bordure, les points le rebond d'échelle, les barres scaleY, et le pulse l'échelle avec opacité.
Contrôle de vitesse
Lent = 1,5s, Normal = 0,8s, Rapide = 0,4s de durée d'animation. Les points et barres utilisent animation-delay sur les éléments enfants pour créer l'effet décalé.
Prêt à intégrer
Copiez les snippets CSS et HTML, collez-les dans votre projet, et le loader fonctionne immédiatement. Aucune dépendance, aucun framework requis.
Sortie CSS
.loader {
width: 48px;
height: 48px;
border: 6px solid #c9b89a33;
border-top-color: #c9b89a;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
Sortie HTML<div class="loader"></div>
Qu'est-ce qu'une animation de chargement CSS ?
Une animation de chargement CSS — aussi appelée spinner CSS ou loader CSS — est un motif d'interface utilisateur indiquant des données en attente sans nécessiter de JavaScript ou de GIF. Le CSS moderne permet des animations complexes avec @keyframes et les propriétés transform, opacity et border. Les patterns courants incluent les spinners (bordure rotative), les points (cercles rebondissants), les barres (rectangles mis à l'échelle) et le pulse (cercle respirant).
Questions fréquentes
Un loader CSS est un indicateur de chargement visuel purement implémenté avec des animations CSS et @keyframes — sans JavaScript ni assets d'images. Il signale aux utilisateurs que du contenu est en cours de chargement.
Le spinner utilise un élément circulaire avec une bordure transparente sauf pour un côté coloré. Une animation @keyframes rotate(360deg) fait tourner l'élément en continu.
Le loader à points affiche trois cercles qui changent d'échelle en séquence avec la transformation scale(), créant un effet de rebond. Le loader à barres affiche quatre rectangles qui changent d'échelle verticalement avec scaleY().
Pour les points et les barres, chaque élément enfant a une valeur animation-delay différente. Cela signifie que chaque élément démarre son cycle d'animation à un moment différent, créant l'apparence en cascade.
Les animations CSS utilisant transform et opacity sont accélérées par le GPU dans tous les navigateurs modernes. Évitez d'animer des propriétés comme width, height qui déclenchent un reflow de mise en page.
Enveloppez le loader dans un conteneur avec display:flex; justify-content:center; align-items:center; Pour une superposition pleine page, ajoutez position:fixed; inset:0.
Les animations CSS @keyframes sont supportées dans tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) depuis 2013. Aucun préfixe fournisseur n'est nécessaire.