Langsung ke konten
ID

5 ikon · Berlisensi MIT

Ikon animasi loading

Spinner dan loader yang terus berputar selama proses masih berjalan. Taruh di dalam tombol submit selama request berlangsung, di tempat konten yang masih dimuat, atau di splash screen layar penuh; ikon ini diam saat pengguna memilih reduced motion.

Semua 5 ikon di kategori ini berputar terus-menerus. Setiap ikon tersedia sebagai komponen React, komponen shadcn/ui, dan animasi Lottie JSON; 2 di antaranya juga tersedia sebagai SVG statis. Semuanya gratis untuk penggunaan komersial di bawah lisensi MIT.

Semua ikon loading

Tempat memakainya

  • Tombol submit yang menunggu respons request
  • Placeholder saat daftar atau grafik sedang dimuat
  • Indikator infinite scroll dan muat lebih banyak
  • Splash screen layar penuh dan transisi antarhalaman
  • Progres unggah dan pemrosesan file

Berdasarkan interaksi

  • Ikon animasi loop · 5

    Berputar terus-menerus; jika reduced motion dipilih, ikon tetap diam di frame pertama. Infinity, Loading circular, Loading V2, Loading V3, Loading V4.

Tambahkan ke aplikasi Anda

Di React, instal react-useanimations lalu import ikonnya; ikon langsung menjalankan interaksi loop bawaannya. Semua ikon di kategori ini bekerja dengan cara yang sama: ganti loading dengan nama yang tertera di halaman ikonnya.

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

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

Dengan shadcn/ui, CLI-nya menambahkan komponen siap pakai:

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

<AnimatedLoading size={24} />

Tidak memakai React? Setiap ikon adalah file Lottie JSON di /icons/<id>.json; lihat Ikon Lottie untuk player web, iOS, Android, dan Flutter.

FAQ

Ikon animasi loading apa saja yang tersedia?

5 ikon: Infinity, Loading circular, Loading V2, Loading V3, dan Loading V4. Semuanya gratis untuk proyek pribadi maupun komersial di bawah lisensi MIT, tanpa kewajiban atribusi.

Bagaimana cara memakai ikon animasi loading ini di React?

Instal react-useanimations, tambahkan import loading from 'react-useanimations/lib/loading', lalu render <UseAnimations animation={loading} size={32} />. Ikon menjalankan interaksi loop bawaannya dan mengikuti warna teks. Jika memakai shadcn/ui, jalankan npx shadcn@latest add https://useanimations.com/r/loading.json sebagai gantinya.

Bisakah ikon animasi loading ini dipakai tanpa React?

Bisa. Setiap ikon adalah file Lottie JSON di https://useanimations.com/icons/<id>.json (misalnya https://useanimations.com/icons/loading.json) yang bisa diputar dengan lottie-web, lottie-ios, lottie-android, atau paket lottie untuk Flutter; SVG statis tersedia di halaman masing-masing ikon (halaman ikon hanya dalam bahasa Inggris). Tidak ada yang memakai expression, jadi build ringan lottie-web sudah cukup.