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

5 icon · Giấy phép MIT

Icon loading động

Spinner và loader lặp liên tục trong suốt thời gian một tác vụ đang chạy. Đặt một icon trong nút submit khi request đang xử lý, thay chỗ cho nội dung chưa tải xong, hoặc trên màn hình splash toàn trang; chúng đứng yên khi người dùng bật chế độ giảm chuyển động.

Cả 5 icon đều lặp liên tục. Mỗi icon có sẵn dưới dạng React component, component shadcn/ui và animation Lottie JSON, dùng miễn phí cả cho mục đích thương mại theo giấy phép MIT. 2 icon trong số đó còn có thêm SVG tĩnh.

Tất cả icon loading

Dùng ở đâu

  • Nút submit đang chờ request
  • Placeholder trong lúc danh sách hoặc biểu đồ đang tải
  • Chỉ báo infinite scroll và nút tải thêm
  • Màn hình splash toàn trang và chuyển route
  • Tiến trình tải lên và xử lý tệp

Theo tương tác

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

    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. Infinity, Loading circular, Loading V2, Loading V3, Loading V4.

Thêm vào ứng dụng của bạn

Với React, hãy cài react-useanimations rồi import icon; icon sẽ tự chạy tương tác “Lặp” của nó. Mọi icon trong danh mục này đều dùng giống hệt: chỉ cần thay loading bằng tên ghi trên trang của icon đó.

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

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

Với shadcn/ui, CLI sẽ thêm sẵn một component:

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

<AnimatedLoading size={24} />

Không dùng React? Mỗi icon là một tệp Lottie JSON tại /icons/<id>.json; xem Icon Lottie để biết các player cho web, iOS, Android và Flutter.

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

Bộ icon loading động gồm những icon nào?

5 icon: Infinity, Loading circular, Loading V2, Loading V3 và Loading V4. Tất cả đều miễn phí cho dự án cá nhân và thương mại theo giấy phép MIT, không bắt buộc ghi nguồn.

Dùng các icon loading động này trong React như thế nào?

Cài react-useanimations, thêm import loading from 'react-useanimations/lib/loading' rồi render <UseAnimations animation={loading} size={32} />. Icon sẽ chạy tương tác “Lặp” của nó và tự lấy theo màu chữ. Nếu dùng shadcn/ui, hãy chạy npx shadcn@latest add https://useanimations.com/r/loading.json.

Có dùng được các icon loading động này mà không cần React không?

Được. Mỗi icon là một tệp Lottie JSON tại https://useanimations.com/icons/<id>.json (ví dụ https://useanimations.com/icons/loading.json), phát được bằng lottie-web, lottie-ios, lottie-android hoặc package lottie của Flutter; SVG tĩnh có trên trang riêng của từng icon (bằng tiếng Anh). Không icon nào dùng expression, nên bản rút gọn (light) của lottie-web là đủ.