Aller au contenu
Toolars
Explorer
Signaler un bug

Design · utilitaire Local

Générateur d'animations de chargement CSS

CSS Loader Generator

Réglez un anneau orbital ou trois points rebondissants — cadre, trait, vitesse et couleurs — et copiez le CSS animé avec bloc prefers-reduced-motion inclus.

Parcours de la tâche / de l'entrée au résultat

Choisissez un style d'indicateur

S'exécute en local · Rien n'est téléversé

Fonctionnement de Générateur d'animations de chargement CSS, confidentialité et outils associés

Parcours de la tâche / de l'entrée au résultat

Comment concevoir un indicateur de chargement CSS

  1. 01

    Choisissez un style d'indicateur

    Ouvrez Style d'indicateur et choisissez Anneau orbital pour un anneau rotatif classique ou Trois points pour un trio de points rebondissants. L'aperçu en direct s'anime à chaque modification, et chaque style embarque ses propres @keyframes à l'export.

  2. 02

    Dimensionnez le cadre et le trait

    Utilisez un cadre de 24 à 160 px et un trait ou des points de 2 à 20 px. Le trait d'un anneau doit faire moins de la moitié du cadre. Les trois points doivent tenir avec au moins 2 px entre eux ; sinon la copie et le téléchargement sont désactivés. Les dimensions exportées de l'anneau incluent sa bordure.

  3. 03

    Réglez la vitesse et les couleurs

    Choisissez une Durée de cycle de 0.2 à 4 secondes par pas de 0.05 s. La Couleur active colore le bord supérieur de l'anneau ou le point central ; la Couleur de piste colore le reste de l'anneau ou les deux points extérieurs. Les cycles lents évoquent un travail d'arrière-plan tranquille ; les rapides donnent un sentiment d'urgence.

  4. 04

    Ou partez de l'exemple

    Cliquez sur Charger un exemple pour appliquer un préréglage Trois points audacieux — cadre de 72 px, points de 12 px et cycle de 0.75 s en rouge et jaune — comme point de départ. Réinitialiser ramène toujours à l'anneau orbital par défaut.

  5. 05

    Copiez ou téléchargez le CSS

    Cliquez sur Copier le CSS pour placer la règle dans le presse-papiers, ou sur Télécharger le .css pour enregistrer toolars-loader.css. Le panneau de sortie affiche les octets exacts que vous exportez, et les deux boutons restent désactivés tant qu'une valeur échoue à la validation.

  6. 06

    Intégrez-le à votre balisage

    Anneau orbital n'a besoin que d'un seul élément portant la classe .loader ; Trois points attend trois enfants span à l'intérieur. L'export inclut un bloc prefers-reduced-motion qui arrête l'animation pour les visiteurs sensibles au mouvement.

Fiche de l'outil

Traitement
Dans votre navigateur
L'entrée quitte cet appareil
Jamais
Conservation
Rien n'est stocké
Prix
Gratuit

Vos données restent dans le navigateur.

Générateur d'animations de chargement CSS utilise son chemin d'exécution local vérifié et ne crée aucun historique caché des entrées ou sorties.

Exécution locale

S'exécute dans l'onglet actuel du navigateur.

Aucun traitement caché

Les données actives de l'outil ne deviennent jamais un enregistrement de document Toolars.

Aucun compte requis

Utilisez le workflow principal sans créer de profil. Les favoris se synchronisent avec votre compte après connexion.

Réinitialisation immédiate

Effacez l'onglet et les données de travail actives disparaissent.

Quand Générateur d'animations de chargement CSS est utile

Créer un anneau orbital orange

Lors du test local du 24/09/2026, choisissez Anneau orbital, un cadre de 64 px, un trait de 8 px, un cycle de 1,2 s, la couleur active #ff6600 et la couleur de piste #dfe3ea. L’aperçu reste valide. Le CSS .loader exporté fixe la largeur et la hauteur à 64px, la bordure à 8px #dfe3ea, le haut en orange et toolars-spin 1.2s linear infinite.

Exporter l’exemple à trois points

« Charger l’exemple » applique Trois points : cadre de 72 px, points de 12 px, cycle de 0,75 s, #f21a10 au centre et #ffd11a sur les côtés. Le CSS utilise un écart de 18px et des délais de -0.25s et -0.5s. Dans le test local, la copie et le fichier toolars-loader.css téléchargé étaient identiques sur 695 octets UTF-8.

Corriger des points trop larges

Avec l’exemple à trois points, réduisez le cadre à 24 px tout en gardant les points à 12 px. L’aperçu affiche CHECK VALUES et indique que les points et leurs espacements doivent tenir dans le cadre. Le CSS est effacé, copie et téléchargement sont désactivés. Revenez à 72 px pour rétablir les 695 octets et les actions.

Ce que Générateur d'animations de chargement CSS fait vraiment

Un tableau de bord qui se rafraîchit toutes les quelques secondes a besoin d'un spinner aux couleurs de la marque ; un bouton de paiement veut un état occupé pendant la confirmation ; un prototype mérite mieux que l'indicateur par défaut du navigateur. Régler visuellement le cadre, le trait et la cadence garantit que l'indicateur est correct avant qu'une seule ligne n'entre dans la feuille de style — et comme le générateur tourne entièrement dans cet onglet, les couleurs et la nomenclature d'un produit non publié ne quittent jamais la machine. L'export ne demande qu'un clic une fois que le mouvement convient.

Questions fréquentes

Quel HTML le CSS généré attend-il ?
Anneau orbital fonctionne avec un seul élément portant la classe .loader. Trois points attend trois enfants span dans .loader ; la feuille de style décale automatiquement leurs délais d'animation, donc le balisage reste trivial et aucune classe supplémentaire n'est nécessaire.
Pourquoi l'aperçu affiche-t-il VÉRIFIER LES VALEURS ?
Utilisez un cadre de 24 à 160 px et un trait ou des points de 2 à 20 px. Le trait d'un anneau doit faire moins de la moitié du cadre. Les trois points doivent tenir avec au moins 2 px entre eux ; sinon la copie et le téléchargement sont désactivés. Les dimensions exportées de l'anneau incluent sa bordure.
Comment les trois points restent-ils synchronisés ?
La feuille de style gère la chorégraphie : le span du milieu prend la Couleur active, et les deuxième et troisième spans reçoivent des délais d'animation négatifs d'un tiers et de deux tiers du cycle, de sorte que le rebond se répartit régulièrement sur la boucle.
L'indicateur respecte-t-il les réglages de mouvement réduit ?
Oui. Chaque export se termine par une media query prefers-reduced-motion qui désactive l'animation — la variante à points se fige en plus à une opacité constante — donc les visiteurs qui demandent moins de mouvement obtiennent un indicateur calme et statique au lieu d'un indicateur tournant.
Puis-je ajuster l'indicateur après l'avoir collé dans mon projet ?
Bien sûr ; la sortie est du CSS simple aux valeurs lisibles. Modifiez les tailles en pixels, la durée ou les couleurs directement dans votre feuille de style — les @keyframes sont aussi des déclarations ordinaires, donc chaque partie de l'indicateur reste modifiable après l'export.
Mes réglages sont-ils téléversés quelque part ?
Non. Le générateur s'exécute entièrement dans l'onglet actuel du navigateur, ne demande aucun compte, et aucune valeur n'entre dans le stockage, les journaux, les analytics ou le réseau. Cliquez sur Réinitialiser pour restaurer les valeurs par défaut ; fermer l'onglet supprime tout.

Continuer dans Design

Des tâches associées, pas une impasse.

Passez à un autre espace de travail ciblé sans revenir à l'index complet.

Générateur de cases à cocher CSS

CSS Checkbox Generator

Stylez une case à cocher native : taille, bordure et couleurs d'état réglables, avec états :focus-visible et :disabled dans le CSS exporté, sans JavaScript.

Créer

Générateur d'interrupteurs CSS

CSS Switch Generator

Concevez un interrupteur en pur CSS — piste, curseur et course calculés — avec focus clavier et mouvement réduit gérés dans le code copié, sans JavaScript.

Créer

Générateur de clip-path CSS

CSS Clip Path Generator

Modifiez les sommets par glissement, au clavier ou par coordonnées. Quatre formes de départ, copie locale de clip-path ou du CSS complet.

Créer

Générateur de motifs de fond CSS

CSS Background Pattern Generator

Composez des motifs de fond en dégradés CSS — points, grille ou diagonale — sans fichier image : trois déclarations à coller, tuile et couleurs réglables.

Créer