Aller au contenu
Aback Tools Logo

Générateur de loaders / spinners

Générez des animations de chargement CSS avec notre générateur de spinners gratuit. Choisissez parmi 16 styles - Spinner classique, double anneau, points rebondissants, barres, pulsation, battement de cœur et plus - organisés par catégorie. Personnalisez la couleur, la taille (12px à 120px), la vitesse d'animation et l'épaisseur du spinner avec des contrôles interactifs et un aperçu en direct. Copiez le code HTML + CSS complet en un clic pour une intégration instantanée dans votre projet. Entièrement privé, 100 % gratuit et sans inscription.

Loader / Spinner Generator
Choose from 16 CSS loading spinner styles, customise colours, size, and speed, and copy the ready-to-use HTML + CSS code with one click.
40px
40px
1s
1s
4px

Rotating border spinner

<!-- HTML -->
<div class="aback-spinner aback-spinner--spinner"></div>

<!-- CSS -->
<style>
@keyframes spinner-rotate { 100% { transform: rotate(360deg); } }

.aback-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.aback-spinner--spinner {
  width: 40px;
  height: 40px;
  border: 5px solid #6366F120;
  border-top-color: #6366F1;
  border-radius: 50%;
  animation: spinner-rotate 1.00s linear infinite;
}
</style>

Pourquoi utiliser notre générateur de loaders / spinners ?

  • 16 styles de spinner : Le générateur de spinners comprend 16 animations de chargement CSS distinctes : Spinner classique, double anneau, anneau, rouleau, cercle, éclipse, points rebondissants, ellipse, ondulation, barres, pulsation, barre de progression, battement de cœur, sablier, carré tournant et points par défaut. Filtrez par catégorie (circulaire, points, barres, divers) pour trouver rapidement le loader parfait.
  • Personnalisation complète : Personnalisez chaque aspect de votre spinner - couleur via sélecteur ou saisie HEX, taille de 12px à 120px, vitesse de 0,2s à 3s et épaisseur pour les spinners circulaires. Les boutons de préréglage pour les tailles et vitesses courantes facilitent les ajustements rapides.
  • 100 % privé - sans téléversement : Toute la génération de code de spinner s'effectue localement dans votre navigateur. Vos couleurs et réglages ne quittent jamais votre appareil et ne sont jamais envoyés à un serveur - sûr pour les designs propriétaires.
  • Gratuit et sans limites : Générez des variantes de spinner illimitées sans inscription, sans abonnement et sans plafond d'utilisation. Le générateur de spinners est entièrement gratuit pour toujours, sans publicité bloquant l'interface.

Cas d'usage courants du générateur de loaders / spinners

  • Développement web : Les développeurs frontend utilisent le générateur de spinners pour créer des indicateurs de chargement pour les appels AJAX, transitions de page et états de chargement de contenu. Copiez le HTML et le CSS directement dans des composants React, Vue ou Angular pour une intégration instantanée.
  • Écrans de chargement d'applications : Les développeurs SPA utilisent le générateur pour les écrans d'accueil et les états de chargement initial. Les animations CSS pures sont légères et performantes, garantissant un rendu initial rapide sans dépendances JavaScript.
  • Design mobile et responsive : Les développeurs mobiles utilisent le générateur pour créer des indicateurs de chargement adaptés aux mises en page mobiles. L'approche CSS seule assure un rendu cohérent sur tous les appareils sans requêtes réseau supplémentaires.
  • Téléversement de fichiers et soumission de formulaires : Designers et développeurs utilisent le générateur pour fournir un retour visuel pendant les téléversements, soumissions de formulaires et opérations asynchrones. Les styles barre de progression et pulsation sont particulièrement adaptés aux états de progression de téléversement.
  • API et récupération de données : Les développeurs d'applications gourmandes en données utilisent le générateur pour les états de chargement lors de requêtes vers des API REST, points d'accès GraphQL ou flux de données. Associez les spinners à des écrans squelette pour une UX soignée.
  • Composants de design system : Les mainteneurs de design systems utilisent le générateur pour définir des tokens de chargement standardisés. Des couleurs, tailles et vitesses de spinner cohérentes garantissent une expérience de chargement unifiée dans tous les composants du système.

Qu'est-ce qu'un spinner de chargement CSS ?

Un spinner de chargement CSS (aussi appelé loader ou indicateur de chargement) est une animation visuelle qui informe les utilisateurs qu'un contenu est en cours de chargement ou de traitement. Les spinners CSS purs utilisent des animations @keyframes et des propriétés CSS comme transform, opacity et border pour créer des effets de chargement animés sans JavaScript. Notre générateur crée 16 styles de spinner différents, chacun avec des couleurs, tailles et vitesses personnalisables.

Comment fonctionne notre générateur de spinners

  1. Choisissez un style de spinner : Parcourez 16 styles de spinner organisés par catégorie (Circulaire, Points, Barres, Divers). Cliquez sur n'importe quel style pour le prévisualiser instantanément. Chaque style génère des animations de keyframes CSS uniques pour son effet visuel spécifique.
  2. Personnalisez couleurs et taille : Utilisez le sélecteur de couleur ou la saisie HEX pour définir la couleur du spinner. Ajustez la taille (12px à 120px) et la vitesse d'animation (0,2s à 3s) avec des curseurs ou des boutons de préréglage. Pour les spinners circulaires, ajustez également l'épaisseur de la bordure.
  3. Copiez le code : Cliquez sur « Copier le code » pour copier le bloc de code HTML + CSS complet. La sortie inclut la structure des éléments HTML et tous les keyframes et styles de classe CSS nécessaires au fonctionnement de l'animation.

Bonnes pratiques pour les indicateurs de chargement

  • Utilisez des tailles appropriées : 16-24px pour les spinners dans les boutons, 32-48px pour les chargeurs de zones de contenu et 64-96px pour les écrans de chargement pleine page.
  • Accordez les couleurs de marque : Utilisez la couleur de votre marque pour les spinners afin de maintenir la cohérence visuelle. Notre générateur permet de définir n'importe quelle couleur HEX pour correspondre à votre design system.
  • Considérez la vitesse : Les vitesses rapides (0,5-0,75s) semblent plus réactives pour les chargements courts. Les vitesses lentes (1,5-2s) distraient moins pour les états de chargement longs. Visez 1s par défaut pour la plupart des cas.
  • Associez aux écrans squelette : Pour les pages riches en contenu, combinez spinners et états de chargement squelette pour donner aux utilisateurs une impression de progression et réduire le temps d'attente perçu.

Foire aux questions

Un générateur de spinners crée des animations de chargement CSS avec des styles, couleurs, tailles et vitesses personnalisables. Notre outil comprend 16 types de spinner différents organisés en catégories - circulaire, points, barres et divers. Chaque spinner génère du code CSS pur utilisant des animations @keyframes.

Parcourez les styles de spinner par catégorie, cliquez-en un pour le prévisualiser, puis personnalisez la couleur, la taille, la vitesse et l'épaisseur. L'aperçu se met à jour instantanément. Quand vous êtes satisfait, cliquez sur « Copier le code » pour copier le bloc de code HTML + CSS complet.

Non. Les 16 styles de spinner sont en CSS pur utilisant des animations @keyframes. Aucun JavaScript n'est requis pour de meilleures performances et sans dépendances externes.

Les animations CSS @keyframes sont prises en charge par Chrome 43+, Firefox 16+, Safari 9+, Edge 12+ et Opera 30+. Les propriétés CSS utilisées bénéficient d'un excellent support multi-navigateurs.

Oui. Toute la génération de code de spinner s'effectue 100 % côté client dans votre navigateur. Vos couleurs et réglages ne sont jamais envoyés à un serveur.

Petit (16-24px) pour les boutons, moyen (32-48px) pour les zones de contenu, grand (64-96px) pour les chargeurs pleine page. Le générateur inclut des boutons de préréglage pour les tailles courantes.

Oui. Utilisez le sélecteur de couleur pour choisir visuellement n'importe quelle couleur, ou saisissez directement une valeur HEX. Les 16 styles de spinner utilisent la couleur configurée.

Oui. Le générateur de spinners est 100 % gratuit, sans inscription, sans fonctionnalités premium et sans limites d'utilisation.