Přejít na obsah
CS

5 ikon · licence MIT

Animované ikony načítání

Spinnery a loadery, které běží ve smyčce, dokud něco probíhá. Dejte je do odesílacího tlačítka, dokud čekáte na odpověď požadavku, místo obsahu, který se ještě načítá, nebo na celoobrazovkovou úvodní obrazovku. Když uživatel preferuje omezený pohyb, zůstanou v klidu.

Všech 5 ikon se přehrává ve smyčce. Každá ikona je k dispozici jako React komponenta, komponenta pro shadcn/ui a Lottie JSON animace (2 z nich i jako statické SVG), zdarma i pro komerční použití pod licencí MIT.

Všechny ikony v kategorii Načítání

Kde je použít

  • Odesílací tlačítka čekající na odpověď požadavku
  • Zástupný obsah, dokud se načítá seznam nebo graf
  • Indikátory nekonečného scrollování a načtení dalších položek
  • Celoobrazovkové úvodní obrazovky a přechody mezi stránkami
  • Průběh nahrávání a zpracování souborů

Podle interakce

  • Animované ikony ve smyčce · 5

    Přehrává se nepřetržitě; když uživatel preferuje omezený pohyb, zůstane na statickém prvním snímku. Infinity, Loading circular, Loading V2, Loading V3, Loading V4.

Přidejte ikonu do aplikace

V Reactu nainstalujte react-useanimations a naimportujte ikonu; svou interakci „smyčka“ přehraje sama. Všechny ikony v této kategorii fungují stejně: loading jen nahraďte názvem ze stránky požadované ikony.

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

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

Se shadcn/ui vám CLI přidá hotovou komponentu:

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

<AnimatedLoading size={24} />

Nepoužíváte React? Každá ikona je Lottie JSON soubor na adrese /icons/<id>.json; přehrávače pro web, iOS, Android a Flutter popisuje stránka Lottie ikony.

Časté dotazy

Které animované ikony načítání sada obsahuje?

5 ikon: Infinity, Loading circular, Loading V2, Loading V3 a Loading V4. Všechny můžete zdarma používat v osobních i komerčních projektech pod licencí MIT, bez nutnosti uvádět autora.

Jak použít animované ikony načítání v Reactu?

Nainstalujte react-useanimations, přidejte import loading from 'react-useanimations/lib/loading' a vykreslete <UseAnimations animation={loading} size={32} />. Ikona přehraje svou interakci „smyčka“ a převezme barvu textu. Se shadcn/ui místo toho spusťte npx shadcn@latest add https://useanimations.com/r/loading.json.

Můžu animované ikony načítání použít i bez Reactu?

Ano. Každá ikona je Lottie JSON soubor na adrese https://useanimations.com/icons/<id>.json (například https://useanimations.com/icons/loading.json), který přehraje lottie-web, lottie-ios, lottie-android nebo balíček lottie pro Flutter; statická SVG najdete na stránce každé ikony (stránky ikon jsou v angličtině). Žádná z nich nepoužívá výrazy (expressions), takže stačí light build lottie-web.