Générateur de spinner et loader CSS animé

Générez un spinner / loader CSS animé (taille, couleur, vitesse) avec aperçu.

▸Taille : 40px▸Épaisseur : 4px▸Vitesse : 0.8s

▸CSS

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255,255,255,0.15);
  border-top-color: #39d353;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

🔒 100 % côté client — aucune donnée envoyée

Générez un spinner ou loader CSS animé et personnalisez taille, couleur, épaisseur et vitesse, puis copiez le code prêt à l'emploi. Un indicateur de chargement léger, sans image ni librairie JavaScript. Tout est créé localement dans votre navigateur.

À quoi ça sert ?

▸ Ajouter un indicateur de chargement à une page ou un bouton
▸ Personnaliser couleur, taille et vitesse d'animation
▸ Obtenir un loader léger sans image ni JavaScript
▸ Copier un CSS pur réutilisable dans tout projet

FAQ

Le spinner nécessite-t-il du JavaScript ?

Non, il repose uniquement sur CSS et l'animation @keyframes, ce qui le rend très léger.

Puis-je changer la vitesse de rotation ?

Oui, ajustez simplement la durée de l'animation pour accélérer ou ralentir le spinner.

Le code fonctionne-t-il sur mobile ?

Oui, les animations CSS sont fluides et bien supportées sur les navigateurs mobiles modernes.