Générateur de Chargeurs CSS - Animations Spinner, Points, Barres et Pulsation Gratuit

Générez des animations de chargement en CSS pur incluant spinner, points, barres, pulsation et anneau. Personnalisez la taille, la couleur et la vitesse, puis copiez le code complet

Outils CSS

Tool

Loader Style

Size (40px)Color

#6366f1

Speed (1s)

HTML + CSS

<style>
.loader-_R_hbqav5ubqiudb_ {
  width: 40px;
  height: 40px;
  border: 4px solid #6366f140;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: loader-_R_hbqav5ubqiudb_-spin 1s linear infinite;
}
@keyframes loader-_R_hbqav5ubqiudb_-spin {
  to { transform: rotate(360deg); }
}
</style>

<div class="loader-_R_hbqav5ubqiudb_"></div>

Comment utiliser

1Cliquez sur un modèle de chargeur : spinner, points, barres, pulsation ou anneau
2Ajustez la taille (20–80px), la couleur et la vitesse d'animation
3Prévisualisez l'animation du chargeur en direct
4Copiez le code HTML et CSS complet incluant les @keyframes et collez-le dans votre projet

Questions fréquentes

Oui. Tous les chargeurs sont implémentés en CSS pur en utilisant des animations @keyframes. Aucun JavaScript ni bibliothèque externe n'est requis.

Oui. Utilisez le sélecteur de couleur pour définir n'importe quelle couleur. Le CSS généré utilise cette valeur de couleur exacte dans les propriétés concernées (border-color, background-color, etc.).

Le curseur de vitesse ajuste la propriété animation-duration des @keyframes. Les valeurs basses (par exemple 0,3s) créent des animations plus rapides ; les valeurs élevées (par exemple 3s) créent des animations plus lentes.

Copiez la structure HTML générée et le CSS associé (y compris les @keyframes). Collez le CSS dans votre feuille de style et le HTML à l'endroit où vous souhaitez que le chargeur apparaisse.

<style> .loader-_R_hbqav5ubqiudb_ { width: 40px; height: 40px; border: 4px solid #6366f140; border-top-color: #6366f1; border-radius: 50%; animation: loader-_R_hbqav5ubqiudb_-spin 1s linear infinite; } @keyframes loader-_R_hbqav5ubqiudb_-spin { to { transform: rotate(360deg); } } </style> <div class="loader-_R_hbqav5ubqiudb_"></div>

Questions fréquentes

Oui. Tous les chargeurs sont implémentés en CSS pur en utilisant des animations @keyframes. Aucun JavaScript ni bibliothèque externe n'est requis.

Copiez la structure HTML générée et le CSS associé (y compris les @keyframes). Collez le CSS dans votre feuille de style et le HTML à l'endroit où vous souhaitez que le chargeur apparaisse.