Aller au contenu
FR

21 icônes · interaction="loop"

Icônes animées en boucle

Ces icônes jouent en continu tant qu’elles sont à l’écran : elles conviennent aux états qui durent, comme un chargement en cours, un avertissement actif ou un terminal en attente. Quand l’utilisateur a activé la réduction des animations, elles s’arrêtent sur leur première image et restent lisibles comme une icône normale.

Toutes les icônes « boucle »

Comportement

Joue en continu ; reste sur la première image, fixe, quand la réduction des animations est activée.

Si la réduction des animations est activée, l’icône ne démarre pas seule et reste sur sa première image, fixe. Le composant React gère tout cela : vous n’avez qu’à choisir l’icône.

Où l’utiliser

  • Spinners de chargement et indicateurs de progression
  • États d’avertissement et d’erreur actifs
  • Indicateurs de direct et d’enregistrement
  • Invitations à faire défiler dans les sections hero
  • Signaux d’attention pour les nouvelles notifications

Par catégorie

Utilisation dans React

Les icônes listées ici jouent cette interaction par défaut. Toute autre icône peut aussi l’utiliser : passez-lui la prop interaction.

import UseAnimations from 'react-useanimations';
import settings from 'react-useanimations/lib/settings';

// Settings utilise normalement 'hover'
<UseAnimations animation={settings} interaction="loop" size={32} />

Les boucles démarrent seules et se mettent en pause quand elles sortent de l’écran. Ralentissez-en une avec speed, jouez-la une seule fois avec loop={false} ou gardez-la immobile avec autoplay={false} :

import infinity from 'react-useanimations/lib/infinity';

<UseAnimations animation={infinity} speed={0.5} />      // demi-vitesse
<UseAnimations animation={infinity} loop={false} />     // se joue une fois, puis s’arrête
<UseAnimations animation={infinity} autoplay={false} /> // première image, fixe

Toutes les props sont décrites dans la documentation. En dehors de React, les icônes sont des fichiers Lottie JSON ; la page Icônes Lottie montre comment recréer les interactions avec lottie-web.

Questions fréquentes

Quelles icônes utilisent l’interaction « boucle » ?

21 icônes : Alert circle, Alert octagon, Alert triangle, Error, Notification V3, Notification V4, More Horizontal, More Vertical, Checkmark, Help, Airplay, Terminal, Infinity, Loading circular, Loading V2 et 6 autres. Les icônes en boucle servent surtout aux spinners de chargement, aux alertes actives, à une cloche qui sonne ou à une invitation à faire défiler.

Que se passe-t-il quand l’utilisateur a activé la réduction des animations ?

Si la réduction des animations est activée, l’icône ne démarre pas seule et reste sur sa première image, fixe. Le composant React lit prefers-reduced-motion et se met à jour quand le réglage change : vous n’avez aucun code à écrire pour cela.

Comment changer l’interaction d’une icône ?

Chaque icône joue l’interaction pour laquelle elle a été conçue. Passez interaction="loop" pour donner ce comportement à n’importe quelle autre icône, ou une autre valeur ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') pour en changer. Les props autoplay, loop et speed règlent la lecture.