Générateur de loader / spinner CSS

Choisissez un style de loader (cercle, points, barres, pulsation), personnalisez sa couleur, sa taille et sa vitesse, puis copiez le code HTML et CSS généré. Aucune image, uniquement du CSS pur généré et prévisualisé dans votre navigateur.

Style de loader

Couleur

Taille : 48px

Vitesse : 1s

Code HTML + CSS

<style>
.byteryo-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #4f46e533;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: byteryo-spin 1s linear infinite;
}

@keyframes byteryo-spin {
  to { transform: rotate(360deg); }
}
</style>

<div class="byteryo-spinner"></div>

Comment ça marche

Un loader animé en CSS pur est bien plus léger qu'un GIF et s'adapte automatiquement à la couleur et au thème de votre interface. Chaque style proposé ici repose sur une animation CSS (@keyframes) différente : rotation continue pour le cercle, décalage temporel entre plusieurs éléments pour les points et les barres, et variation d'échelle et d'opacité pour la pulsation.

Le code généré fonctionne-t-il sans JavaScript ?

Oui, l'animation est entièrement gérée par CSS via @keyframes : il suffit de copier le bloc <style> et le HTML correspondant dans votre page, aucun script n'est nécessaire pour faire tourner le loader.

Comment afficher le loader uniquement pendant un chargement ?

Ajoutez ou retirez dynamiquement le bloc HTML du loader (ou basculez une classe display: none) avec votre framework JavaScript habituel lorsqu'une requête ou un traitement est en cours, puis masquez-le une fois le contenu prêt.

Le code est généré instantanément dans votre navigateur à partir de vos réglages, sans connexion à un serveur.