Aller au contenu
FR

5 icônes · licence MIT

Icônes animées de chargement

Spinners et loaders qui tournent en boucle tant qu’une opération est en cours. Placez-en un dans un bouton d’envoi pendant une requête, à la place d’un contenu qui charge encore ou sur un écran de démarrage plein écran ; ils restent immobiles quand l’utilisateur a activé la réduction des animations.

Les 5 icônes bouclent en continu. Chacune est disponible en composant React, en composant shadcn/ui et en animation Lottie JSON, et 2 d’entre elles existent aussi en SVG statique, gratuitement pour un usage commercial sous licence MIT.

Toutes les icônes de chargement

Où les utiliser

  • Boutons d’envoi en attente d’une requête
  • Placeholders pendant le chargement d’une liste ou d’un graphique
  • Indicateurs de scroll infini et de chargement de la suite
  • Écrans de démarrage plein écran et transitions de route
  • Progression d’envoi et de traitement de fichiers

Par interaction

  • Icônes animées en boucle · 5

    Joue en continu ; reste sur la première image, fixe, quand la réduction des animations est activée. Infinity, Loading circular, Loading V2, Loading V3, Loading V4.

En ajouter une à votre app

Avec React, installez react-useanimations et importez l’icône : elle joue d’elle-même son interaction « boucle ». Toutes les icônes de cette catégorie fonctionnent de la même façon : remplacez loading par le nom indiqué sur leur page.

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import loading from 'react-useanimations/lib/loading';

<UseAnimations animation={loading} size={32} />

Avec shadcn/ui, la CLI ajoute un composant prêt à l’emploi :

npx shadcn@latest add https://useanimations.com/r/loading.json
import { AnimatedLoading } from '@/components/animations/loading';

<AnimatedLoading size={24} />

Vous n’utilisez pas React ? Chaque icône est un fichier Lottie JSON à l’adresse /icons/<id>.json ; la page Icônes Lottie présente les lecteurs pour le web, iOS, Android et Flutter.

Questions fréquentes

Quelles icônes animées de chargement sont incluses ?

5 icônes : Infinity, Loading circular, Loading V2, Loading V3 et Loading V4. Toutes sont gratuites pour les projets personnels et commerciaux sous licence MIT, sans attribution obligatoire.

Comment utiliser ces icônes animées de chargement dans React ?

Installez react-useanimations, ajoutez import loading from 'react-useanimations/lib/loading' et affichez <UseAnimations animation={loading} size={32} />. L’icône joue son interaction « boucle » et suit la couleur du texte. Avec shadcn/ui, lancez plutôt npx shadcn@latest add https://useanimations.com/r/loading.json.

Puis-je utiliser ces icônes animées de chargement sans React ?

Oui. Chaque icône est un fichier Lottie JSON disponible à l’adresse https://useanimations.com/icons/<id>.json (par exemple https://useanimations.com/icons/loading.json), lisible avec lottie-web, lottie-ios, lottie-android ou le package lottie de Flutter ; les SVG statiques se trouvent sur la page de chaque icône (en anglais). Aucune n’utilise d’expressions : la version light de lottie-web suffit.