Chuyển đến nội dung chính
VI

21 icon · interaction="loop"

Icon động lặp liên tục

Những icon này phát liên tục chừng nào còn hiển thị trên màn hình, nên hợp với các trạng thái kéo dài: đang tải, một cảnh báo đang hoạt động, terminal đang chờ. Khi người dùng bật giảm chuyển động, chúng dừng ở khung hình đầu tiên và vẫn đọc được như một icon bình thường.

Tất cả icon tương tác “Lặp”

Cách hoạt động

Phát liên tục; đứng yên ở khung hình tĩnh đầu tiên khi người dùng bật giảm chuyển động.

Khi người dùng bật giảm chuyển động, icon không tự phát mà đứng yên ở khung hình tĩnh đầu tiên. React component lo hết những việc này; bạn chỉ cần chọn icon.

Dùng ở đâu

  • Spinner loading và chỉ báo tiến trình
  • Trạng thái cảnh báo và lỗi đang diễn ra
  • Chỉ báo đang phát trực tiếp và đang ghi
  • Gợi ý cuộn xuống ở phần hero
  • Dấu hiệu gây chú ý cho thông báo mới

Theo danh mục

Dùng trong React

Các icon liệt kê ở đây mặc định chạy tương tác này. Icon khác cũng dùng được: chỉ cần truyền prop interaction.

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

// Settings mặc định dùng 'hover'
<UseAnimations animation={settings} interaction="loop" size={32} />

Icon lặp tự phát và tạm dừng khi bị cuộn ra khỏi màn hình. Làm chậm lại bằng speed, chỉ phát một lần với loop={false}, hoặc giữ đứng yên với autoplay={false}:

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

<UseAnimations animation={infinity} speed={0.5} />      // nửa tốc độ
<UseAnimations animation={infinity} loop={false} />     // phát một lần rồi dừng
<UseAnimations animation={infinity} autoplay={false} /> // khung hình tĩnh đầu tiên

Tất cả prop đều có trong tài liệu. Ngoài React, các icon là tệp Lottie JSON; trang Icon Lottie hướng dẫn cách tái tạo các tương tác bằng lottie-web.

Câu hỏi thường gặp

Những icon nào dùng tương tác “Lặp”?

21 icon: Alert circle, Alert octagon, Alert triangle, Error, Notification V3, Notification V4, More Horizontal, More Vertical, Checkmark, Help, Airplay, Terminal, Infinity, Loading circular, Loading V2 và 6 icon khác. Icon lặp thường dùng cho spinner loading, cảnh báo đang hoạt động, chuông đang rung hoặc gợi ý cuộn xuống.

Điều gì xảy ra khi người dùng bật giảm chuyển động?

Khi người dùng bật giảm chuyển động, icon không tự phát mà đứng yên ở khung hình tĩnh đầu tiên. React component tự đọc prefers-reduced-motion và cập nhật ngay khi thiết lập này thay đổi, nên bạn không cần viết thêm code nào.

Làm sao đổi tương tác của một icon?

Mỗi icon chạy tương tác mà nó được thiết kế cho. Truyền interaction="loop" để icon khác cũng có hành vi này, hoặc một giá trị khác ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') để đổi sang tương tác tương ứng. Các prop autoplay, loop và speed điều chỉnh cách phát.