İçeriğe geç
TR

5 ikon · MIT lisanslı

Animasyonlu yükleme ikonları

Bir işlem sürdüğü müddetçe döngüde oynayan spinner’lar ve loader’lar. Bir istek çalışırken gönder düğmesinin içine, hâlâ yüklenen içeriğin yerine ya da tam ekran bir açılış ekranına koyun; kullanıcı azaltılmış hareketi tercih ettiğinde sabit kalırlar.

5 ikonun tamamı kesintisiz döngüde oynar. Her biri React bileşeni, shadcn/ui bileşeni ve Lottie JSON animasyonu olarak sunulur; 2 tanesi statik SVG olarak da mevcuttur. MIT lisansı sayesinde ticari projelerde de ücretsiz kullanılabilir.

Yükleme kategorisindeki tüm ikonlar

Nerede kullanılır

  • Bir isteğin yanıtını bekleyen gönder düğmeleri
  • Liste ya da grafik yüklenirken yer tutucular
  • Sonsuz kaydırma ve daha fazla yükle göstergeleri
  • Tam ekran açılış ekranları ve sayfa geçişleri
  • Dosya yükleme ve işleme ilerlemesi

Etkileşime göre

  • Döngüsel animasyonlu ikonlar · 5

    Kesintisiz oynar; azaltılmış hareket tercih edildiğinde statik ilk karede kalır. Infinity, Loading circular, Loading V2, Loading V3, Loading V4.

Uygulamanıza ekleyin

React’te react-useanimations paketini kurup ikonu import etmeniz yeterli; ikon kendi etkileşimini (Döngü) kendiliğinden oynatır. Bu kategorideki her ikon aynı şekilde çalışır: loading yerine ikonun sayfasındaki adı yazın.

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

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

shadcn/ui ile CLI hazır bir bileşen ekler:

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

<AnimatedLoading size={24} />

React kullanmıyor musunuz? Her ikon /icons/<id>.json adresinde bir Lottie JSON dosyasıdır; web, iOS, Android ve Flutter oynatıcıları için Lottie ikonları sayfasına bakın.

Sık sorulan sorular

Yükleme kategorisinde hangi ikonlar var?

5 ikon: Infinity, Loading circular, Loading V2, Loading V3 ve Loading V4. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

Bu animasyonlu yükleme ikonları React’te nasıl kullanılır?

react-useanimations paketini kurun, import loading from 'react-useanimations/lib/loading' satırını ekleyin ve <UseAnimations animation={loading} size={32} /> ile render edin. İkon kendi etkileşimini (Döngü) oynatır ve metin rengini izler. shadcn/ui kullanıyorsanız bunun yerine npx shadcn@latest add https://useanimations.com/r/loading.json komutunu çalıştırın.

Bu animasyonlu yükleme ikonları React olmadan kullanılabilir mi?

Evet. Her ikon https://useanimations.com/icons/<id>.json adresinde bir Lottie JSON dosyasıdır (örneğin https://useanimations.com/icons/loading.json) ve lottie-web, lottie-ios, lottie-android ya da Flutter’ın lottie paketiyle oynatılabilir; statik SVG’ler her ikonun kendi sayfasında (ikon sayfaları yalnızca İngilizce). Hiçbiri ifade (expression) kullanmadığı için lottie-web’in hafif sürümü (light build) yeterlidir.