Zum Inhalt springen
DE

21 Icons · interaction="loop"

Animierte Icons in Endlosschleife

Diese Icons laufen ununterbrochen, solange sie zu sehen sind, und passen damit zu Zuständen, die andauern: Etwas lädt, eine Warnung ist aktiv, ein Terminal wartet. Ist reduzierte Bewegung eingestellt, bleiben sie auf ihrem ersten Frame stehen und funktionieren weiter als ganz normales Icon.

Alle Icons mit Loop

So verhält es sich

Läuft ununterbrochen; bleibt bei reduzierter Bewegung auf dem statischen ersten Frame stehen.

Ist reduzierte Bewegung eingestellt, startet das Icon nicht automatisch und bleibt auf seinem statischen ersten Frame. All das übernimmt die React-Komponente, Sie wählen nur das Icon aus.

Einsatzmöglichkeiten

  • Lade-Spinner und Fortschrittsanzeigen
  • Aktive Warn- und Fehlerzustände
  • Live- und Aufnahmeanzeigen
  • Scroll-Hinweise im Hero-Bereich
  • Aufmerksamkeitsmarker für neue Benachrichtigungen

Nach Kategorie

In React verwenden

Die hier aufgeführten Icons spielen diese Interaktion standardmäßig ab. Jedes andere Icon kann sie ebenfalls nutzen: Übergeben Sie dazu das Prop interaction.

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

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

Loops starten automatisch und pausieren, solange sie aus dem sichtbaren Bereich gescrollt sind. Mit speed verlangsamen Sie die Animation, mit loop={false} läuft sie nur einmal, und mit autoplay={false} bleibt sie stehen:

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

<UseAnimations animation={infinity} speed={0.5} />      // halbe Geschwindigkeit
<UseAnimations animation={infinity} loop={false} />     // spielt einmal, dann Stopp
<UseAnimations animation={infinity} autoplay={false} /> // statischer erster Frame

Alle Props stehen in der Dokumentation. Außerhalb von React sind die Icons Lottie-JSON-Dateien; unter Lottie-Icons sehen Sie, wie Sie die Interaktionen mit lottie-web nachbauen.

Häufige Fragen

Welche Icons nutzen die Interaktion „Loop“?

21 Icons: Alert circle, Alert octagon, Alert triangle, Error, Notification V3, Notification V4, More Horizontal, More Vertical, Checkmark, Help, Airplay, Terminal, Infinity, Loading circular, Loading V2 und 6 weitere. Typische Loop-Icons sind Lade-Spinner, aktive Warnungen, eine läutende Glocke oder ein Scroll-Hinweis.

Was passiert, wenn reduzierte Bewegung eingestellt ist?

Ist reduzierte Bewegung eingestellt, startet das Icon nicht automatisch und bleibt auf seinem statischen ersten Frame. Die React-Komponente liest prefers-reduced-motion aus und reagiert, sobald sich die Einstellung ändert. Sie brauchen dafür keinen eigenen Code.

Wie ändere ich die Interaktion eines Icons?

Jedes Icon spielt die Interaktion ab, für die es gestaltet wurde. Mit interaction="loop" bekommt jedes andere Icon dieses Verhalten, mit einem anderen Wert ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') ein anderes. Die Props autoplay, loop und speed steuern die Wiedergabe.