Zum Inhalt springen
DE

5 Icons · MIT-Lizenz

Animierte Lade-Icons

Spinner und Loader, die in Schleife laufen, solange etwas in Arbeit ist. Setzen Sie einen in den Absenden-Button, während ein Request läuft, an die Stelle von Inhalten, die noch laden, oder auf einen Vollbild-Splashscreen. Bevorzugt der Nutzer reduzierte Bewegung, bleiben sie still stehen.

Alle 5 Icons laufen in Endlosschleife. Jedes Icon gibt es als React-Komponente, als shadcn/ui-Komponente und als Lottie-JSON-Animation, 2 davon zusätzlich als statisches SVG, kostenlos auch für kommerzielle Projekte unter der MIT-Lizenz.

Alle Icons der Kategorie „Ladeanzeigen“

Einsatzmöglichkeiten

  • Absenden-Buttons, die auf einen Request warten
  • Platzhalter, während eine Liste oder ein Diagramm lädt
  • Anzeigen für Infinite Scroll und „Mehr laden“
  • Vollbild-Splashscreens und Routenwechsel
  • Fortschritt beim Datei-Upload und bei der Verarbeitung

Nach Interaktion

  • Animierte Icons in Endlosschleife · 5

    Läuft ununterbrochen; bleibt bei reduzierter Bewegung auf dem statischen ersten Frame stehen. Infinity, Loading circular, Loading V2, Loading V3, Loading V4.

In die eigene App einbauen

Mit React installieren Sie react-useanimations und importieren das Icon; seine Interaktion „Loop“ spielt es von selbst ab. Alle Icons dieser Kategorie funktionieren gleich: Ersetzen Sie loading durch den Namen, der auf der jeweiligen Icon-Seite steht.

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

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

Mit shadcn/ui fügt die CLI eine fertige Komponente hinzu:

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

<AnimatedLoading size={24} />

Kein React im Einsatz? Jedes Icon ist eine Lottie-JSON-Datei unter /icons/<id>.json; Player für Web, iOS, Android und Flutter finden Sie unter Lottie-Icons.

Häufige Fragen

Welche Icons enthält die Kategorie „Ladeanzeigen“?

5 Icons: Infinity, Loading circular, Loading V2, Loading V3 und Loading V4. Alle sind unter der MIT-Lizenz kostenlos für private und kommerzielle Projekte nutzbar, ohne Namensnennung.

Wie verwende ich die Icons der Kategorie „Ladeanzeigen“ in React?

Installieren Sie react-useanimations, fügen Sie import loading from 'react-useanimations/lib/loading' hinzu und rendern Sie <UseAnimations animation={loading} size={32} />. Das Icon spielt seine Interaktion „Loop“ ab und übernimmt die Textfarbe. Mit shadcn/ui führen Sie stattdessen npx shadcn@latest add https://useanimations.com/r/loading.json aus.

Kann ich die Icons der Kategorie „Ladeanzeigen“ ohne React verwenden?

Ja. Jedes Icon ist eine Lottie-JSON-Datei unter https://useanimations.com/icons/<id>.json (zum Beispiel https://useanimations.com/icons/loading.json), abspielbar mit lottie-web, lottie-ios, lottie-android oder dem Flutter-Paket lottie; statische SVGs finden Sie auf der jeweiligen Icon-Seite (die Icon-Seiten sind nur auf Englisch verfügbar). Keines davon nutzt Expressions, der Light-Build von lottie-web reicht also aus.