Langsung ke konten
ID

21 ikon · interaction="loop"

Ikon animasi loop

Ikon ini berputar terus selama tampil di layar, sehingga cocok untuk keadaan yang berlangsung lama: sesuatu sedang dimuat, sebuah peringatan sedang aktif, terminal sedang menunggu. Jika pengguna memilih reduced motion, ikon berhenti di frame pertamanya dan tetap terbaca sebagai ikon biasa.

Semua ikon dengan interaksi loop

Cara kerjanya

Berputar terus-menerus; jika reduced motion dipilih, ikon tetap diam di frame pertama.

Jika pengguna memilih reduced motion, ikon tidak berputar otomatis dan tetap diam di frame pertamanya. Komponen React menangani semua ini; Anda cukup memilih ikonnya.

Tempat memakainya

  • Spinner loading dan indikator progres
  • Keadaan peringatan dan error yang sedang aktif
  • Indikator live dan rekaman
  • Petunjuk gulir ke bawah di hero section
  • Penanda perhatian untuk notifikasi baru

Berdasarkan kategori

  • Peringatan · 4

    Alert circle, Alert octagon, Alert triangle, Error

  • Notifikasi · 2

    Notification V3, Notification V4

  • Navigasi · 2

    More Horizontal, More Vertical

  • Aksi · 2

    Checkmark, Help

  • Media · 1

    Airplay

  • Pengembangan · 1

    Terminal

  • Loading · 5

    Infinity, Loading circular, Loading V2, Loading V3, Loading V4

  • Lainnya · 4

    Activity, Arrow down, Arrow up, Scroll down

Pakai di React

Ikon yang tercantum di sini menjalankan interaksi ini secara default. Ikon lain pun bisa memakainya: cukup berikan prop interaction.

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

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

Ikon loop berputar otomatis dan berhenti sementara saat digulir keluar dari layar. Perlambat dengan speed, putar sekali saja dengan loop={false}, atau biarkan diam dengan autoplay={false}:

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

<UseAnimations animation={infinity} speed={0.5} />      // setengah kecepatan
<UseAnimations animation={infinity} loop={false} />     // diputar sekali, lalu berhenti
<UseAnimations animation={infinity} autoplay={false} /> // frame pertama, diam

Semua props dijelaskan di dokumentasi. Di luar React, ikon-ikon ini adalah file Lottie JSON; halaman Ikon Lottie menunjukkan cara membuat ulang interaksinya dengan lottie-web.

FAQ

Ikon mana saja yang memakai interaksi loop?

21 ikon: Alert circle, Alert octagon, Alert triangle, Error, Notification V3, Notification V4, More Horizontal, More Vertical, Checkmark, Help, Airplay, Terminal, Infinity, Loading circular, Loading V2, dan 6 lainnya. Ikon loop biasanya dipakai untuk spinner loading, peringatan yang aktif, lonceng yang berdering, atau petunjuk gulir ke bawah.

Apa yang terjadi jika pengguna memilih reduced motion?

Jika pengguna memilih reduced motion, ikon tidak berputar otomatis dan tetap diam di frame pertamanya. Komponen React membaca prefers-reduced-motion dan ikut menyesuaikan saat pengaturannya berubah, jadi Anda tidak perlu menulis kode apa pun untuk itu.

Bagaimana cara mengganti interaksi sebuah ikon?

Setiap ikon menjalankan interaksi yang memang dirancang untuknya. Berikan interaction="loop" agar ikon lain berperilaku seperti ini, atau nilai lain ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') untuk menggantinya. Props autoplay, loop, dan speed mengatur pemutarannya.