Les pubs vous déplaisent ? Aller Sans pub Auj. 

Générateur d'animation de chargement CSS

CouleurPromoteur

ANNONCE · Supprimer ?

SAISIR

Processus automatique

Type d'animation

Taper

Apparence

Taille (px)

Taille globale du chargeur en pixels.

Épaisseur de trait (px)

Utilisé par les chargeurs à anneau (Anneau tournant, Anneau dual, Cercle pulsant).

Couleur principale

Piste / Couleur secondaire

Couleur du tracé pour les chargeurs à anneau ; ignoré par les types à points uniquement.

Animation

Durée (secondes)

Durée d'une séquence complète d'animation, en secondes.

Sortir

Format

Étiquette ARIA

Étiquette accessible annoncée par les lecteurs d'écran.

SORTIR

Côté client

ANNONCE · Supprimer ?

Guide

Générateur d'animation de chargement en CSS

Générateur d'animation de chargement CSS

Génère huit animations de chargement populaires en CSS pur — anneau tournant, anneau dual, points pulsants, points rebondissants, balle rebondissante, barres d'égaliseur, cercle pulsant et indicateur de saisie. Personnalisez la couleur, la taille, l'épaisseur du tracé et la durée ; observez la prévisualisation en temps réel ; copiez le code @keyframes et le HTML minimal dans votre projet. Aucun JavaScript, aucun SVG, aucune dépendance externe.

Comment utiliser

Choisissez un type d'animation dans le menu déroulant.
Définissez la taille du chargeur en pixels et ajustez l'épaisseur du tracé pour les types à anneau.
Sélectionnez une couleur principale et une couleur de tracé / couleur secondaire.
Définissez la durée (en secondes) d'une séquence complète.
Sélectionnez un format de sortie — HTML + CSS combiné, CSS uniquement ou HTML uniquement.
Définissez optionnellement une étiquette personnalisée ARIA pour les lecteurs d'écran.
Copiez le snippet généré ou téléchargez-le sous forme de fichier.

Caractéristiques

Huit styles d'animation — couvre les motifs les plus courants d'interfaces modernes.
Prévisualisation en temps réel — chaque modification est re-réndue instantanément afin que vous puissiez vérifier la durée et la fluidité avant de copier.
Sortie en CSS pur — aucun coût de thread JavaScript et aucune marque SVG à maintenir.
Noms de classes scopés — chaque snippet généré utilise un préfixe unique afin que plusieurs chargeurs puissent coexister sans collision.
Accessible par défaut — chaque chargeur inclut le rôle « status » et une étiquette configurable aria-label.
Trois modes de sortie — HTML + CSS combiné, CSS uniquement ou HTML uniquement, selon la manière dont vous l'intégrez.

 FAQ

Quel est le rôle de @keyframes en CSS ?

L'instruction @keyframes définit les étapes intermédiaires d'une animation CSS. Chaque étape (0%, 50%, 100%, etc.) décrit les styles que doit avoir un élément à ce moment précis de la séquence d'animation. Le navigateur intercale entre les étapes pour produire un mouvement fluide. Sans @keyframes, la propriété d'animation n'a rien à jouer.
Pourquoi utiliser des animations CSS au lieu d'SVG ou de JavaScript pour les chargeurs ?

Les animations CSS s'exécutent sur le thread de composition du navigateur, ce qui signifie qu'elles restent fluides même lorsque le thread principal de JavaScript est occupé. Elles n'ont pas de dépendance en script, pas de charge supplémentaire et s'adaptent de manière fluide aux appareils anciens. Les chargeurs SVG ou JavaScript peuvent réaliser des fonctionnalités plus complexes, mais pour un simple spinner ou des points rebondissants, le CSS est la solution la plus légère et la plus fiable.
Qu'est-ce qu'une fonction de timing cubique (cubic-bezier) ?

Une fonction de timing cubique décrit comment une animation accélère et décélère au fil du temps à l'aide de quatre points de contrôle sur une courbe. Par rapport aux mots-clés comme linear ou ease-in-out, la fonction cubique vous permet de personnaliser le sentiment du mouvement — par exemple, une balle qui rebondit utilise cubic-bezier(0.5, 0.05, 0.5, 0.95) pour imiter la gravité.
Pourquoi les animations de chargement ont-elles besoin d'un rôle et d'une étiquette aria ?

Les lecteurs d'écran ne voient pas un anneau tournant, ils ont besoin d'une indication programmée indiquant qu'une action se produit. Le rôle « status » indique aux technologies d'assistance que l'élément transmet une mise à jour en temps réel, et l'étiquette aria fournit le texte lisible par l'humain qui est annoncé. Sans ces attributs, un chargeur est invisible pour les utilisateurs malvoyants.

Envie d'une expérience sans pub ? Passez à la version sans pub



 Installez nos extensions

Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide

Sur

恵 Le Tableau de Bord Est Arrivé !

Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !

ANNONCE · Supprimer ?