Générateur de Loaders CSS
Le générateur de loader CSS crée des animations de chargement en pur CSS dans six styles (spinner, points rebondissants, anneau, pulsation, barres et double anneau) avec taille, couleur, vitesse et épaisseur réglables, et fournit le CSS et le HTML.
À propos de cet outil
Le générateur de loader CSS crée des animations de chargement en pur CSS dans six styles (spinner, points rebondissants, anneau, pulsation, barres et double anneau) avec taille, couleur, vitesse et épaisseur réglables, et fournit le CSS et le HTML.
Mode d’emploi
- Choisissez un style de loader.
- Réglez la taille, la couleur, la vitesse et l’épaisseur.
- Vérifiez l’aperçu en direct.
- Cliquez sur Copier CSS + HTML et collez les deux dans votre page.
Bon à savoir
- Les loaders en pur CSS ne nécessitent ni images, ni GIF, ni JavaScript.
- Les spinners tournent grâce à @keyframes et transform: rotate(), des propriétés efficaces à animer.
- Le balisage se compose d’un seul élément, ou de quelques éléments enfants pour les points et les barres.
- Ajoutez role="status" et un libellé masqué visuellement comme « Chargement… » pour que les lecteurs d’écran annoncent le loader.
- Pensez à ralentir ou mettre en pause les loaders avec prefers-reduced-motion.
Fonctionne entièrement dans votre navigateur : rien de ce que vous saisissez n’est envoyé ni stocké.
Questions fréquentes
Comment créer un spinner de chargement en CSS ?
Donnez à un élément carré une bordure avec un côté coloré, border-radius: 50% et une animation @keyframes de rotation, ou copiez-en un depuis ce générateur.
Les loaders CSS sont-ils meilleurs que les GIF ?
En général, oui : ils sont plus légers, restent nets à toutes les tailles, et leur couleur comme leur vitesse se modifient en CSS.
Comment rendre un loader accessible ?
Placez-le dans un élément avec role="status" et ajoutez un texte masqué comme « Chargement… » pour que les technologies d’assistance puissent l’annoncer.
Comment centrer le loader sur la page ?
Placez-le dans un conteneur avec display: flex; justify-content: center; align-items: center;.