LocalToolsCollection d’outils de navigateur hors ligne

Catégorie: Développement

Générateur de spinner de chargement CSS

Idée interneUn outil manque ?

Concevez des indicateurs de chargement CSS légers en local et copiez le code

Créez des spinners de chargement en CSS pur avec aperçu en direct. Réglez taille, couleur, épaisseur et vitesse, puis copiez les extraits HTML et CSS. Sans JavaScript ni images.

Aperçu

HTML
<span class="loader" role="status" aria-label="Chargement…"></span>
CSS
.loader {
  display: inline-block;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 4px solid #dfe4de;
  border-top-color: #2f6f4f;
  border-radius: 50%;
  animation: loader-spin 0.9s linear infinite;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader span {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

Chaque extrait n'anime que transform et opacity, et se termine par un bloc prefers-reduced-motion : l'animation s'arrête pour qui a demandé à son système de réduire les mouvements.

Pas de JavaScript, pas d'images, pas de polices web — et rien ne quitte votre navigateur.

Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.

À quoi sert cet outil

Un indicateur de chargement est l'un des rares endroits où quelques lignes de CSS battent nettement une bibliothèque : pas de script à charger, pas d'image à demander, rien à initialiser avant la chose que vous attendez. Ces cinq modèles — anneau, double anneau, points, barres et pulsation — n'animent que `transform` et `opacity`, ce qui permet au navigateur de les exécuter sur le compositeur au lieu de recalculer la mise en page à chaque image. Chaque extrait se termine par un bloc `prefers-reduced-motion`, parce qu'un spinner est décoratif et que quelqu'un qui a demandé à son système d'arrêter de bouger les choses ne devrait pas avoir à le regarder. Le balisage est un `<span role="status">` avec un libellé, pour qu'un lecteur d'écran annonce l'attente au lieu de tomber sur une boîte vide.

Mode d'emploi

  1. Choisissez un modèle, puis réglez taille, épaisseur, vitesse et couleurs.
  2. Renommez la classe si elle risque d'entrer en conflit avec votre feuille de styles.
  3. Copiez le HTML et le CSS dans votre projet.

Confidentialité

Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.

Questions fréquentes

Les spinners sont-ils uniquement en CSS ?
Oui. Chacun est un span (avec quelques spans enfants vides pour les modèles points et barres) plus une animation CSS. Pas de JavaScript, pas de SVG, pas d'image, pas de police web.
Ai-je besoin de JavaScript pour les faire tourner ?
Non. L'animation démarre dès que l'élément est dans le document. Il ne vous faut du code que pour décider quand l'afficher et le masquer.
Puis-je changer la vitesse et la couleur ?
Oui — taille, épaisseur du trait, durée de l'animation, couleur principale et couleur du rail sont autant de réglages ici, écrits directement dans l'extrait que vous copiez.
Et les visiteurs qui préfèrent moins de mouvement ?
Chaque extrait généré se termine par une media query prefers-reduced-motion qui interrompt de fait l'animation : l'indicateur apparaît toujours, mais il ne tourne pas pour les personnes ayant réduit les animations au niveau système.
Le code est-il généré en local ?
Oui. Les réglages, l'aperçu et les extraits générés restent dans votre navigateur ; rien n'est envoyé.

Revenir à tous les outils