CSS Loader/Spinner Generator là gì?

CSS Loader/Spinner Generator là một công cụ trực quan giúp bạn tạo các hiệu ứng tải đẹp mắt bằng CSS thuần. Thay vì viết các hoạt ảnh keyframe phức tạp từ đầu, chỉ cần duyệt qua bộ sưu tập 43 mẫu được thiết kế thủ công của chúng tôi, tùy chỉnh chúng để phù hợp với thiết kế của bạn và sao chép mã.

Tại sao sử dụng CSS Loaders?

Các chỉ báo tải là cần thiết cho trải nghiệm người dùng. Chúng cung cấp phản hồi trực quan trong quá trình tìm nạp dữ liệu, chuyển đổi trang hoặc bất kỳ hoạt động không đồng bộ nào. Các loader dựa trên CSS cung cấp một số lợi thế:

Nhẹ

Không cần JavaScript hoặc tệp hình ảnh — các hoạt ảnh CSS thuần giữ kích thước gói của bạn ở mức tối thiểu.

Có thể tùy chỉnh

Dễ dàng thay đổi màu sắc, kích thước và tốc độ để phù hợp hoàn hảo với nhận dạng thương hiệu của bạn.

Hiệu suất cao

Các hoạt ảnh CSS được tăng tốc phần cứng chạy mượt mà trên tất cả các thiết bị mà không ảnh hưởng đến hiệu suất.

Dễ tiếp cận

Hoạt động trên tất cả các trình duyệt hiện đại với kết xuất nhất quán và không có vấn đề tương thích.

Danh mục Loader

Bộ sưu tập của chúng tôi được tổ chức thành 7 danh mục để giúp bạn tìm loader hoàn hảo cho dự án của mình:

Spinner

Các vòng và cung quay cổ điển 8 mẫu

Dots

Các mẫu chấm nảy, mờ dần và theo dõi 8 mẫu

Bars

Hoạt ảnh sóng, bộ cân bằng và thanh trượt 7 mẫu

Pulse

Các vòng tròn mở rộng, gợn sóng và hiệu ứng nhịp tim 6 mẫu

Progress

Thanh tuyến tính, sọc và chỉ báo không xác định 6 mẫu

Shapes

Hoạt ảnh khối 3D, hình dạng biến hình và lưới 8 mẫu

Table of Contents

1. CSS Loader/Spinner Generator là gì?
- 1.1. Tại sao sử dụng CSS Loaders?
- 1.2. Danh mục Loader
2. Cách sử dụng
3. Tính năng
4. Các Câu hỏi Thường gặp

Cách sử dụng

Duyệt và Chọn một Loader

Sử dụng các tab danh mục (Tất cả, Spinner, Dots, Bars, Pulse, Progress, Shapes) để lọc loader theo loại. Mỗi hình ảnh thu nhỏ hiển thị bản xem trước hoạt ảnh trực tiếp. Nhấp vào bất kỳ loader nào để chọn nó.

Mẹo nhanh: Nhấp vào nút Ngẫu Nhiên để khám phá các loader mới một cách nhanh chóng và lấy cảm hứng.

Tùy chỉnh Loader của bạn

Sau khi chọn loader, sử dụng các điều khiển ở bên phải để tùy chỉnh nó:

Màu sắc — Nhấp vào bộ chọn màu để chọn bất kỳ màu nào cho loader của bạn
Kích thước — Kéo thanh trượt hoặc nhập giá trị từ 20px đến 120px
Tốc độ — Điều chỉnh thời lượng hoạt ảnh từ 0.3s (nhanh) đến 3.0s (chậm)

Tất cả các thay đổi được phản ánh trong bản xem trước trực tiếp ngay lập tức.

Xem trước trên Nền khác nhau

Chuyển đổi giữa nền Sáng, Tối và Trong Suốt để xem loader của bạn trông như thế nào trong các bối cảnh khác nhau. Điều này giúp đảm bảo loader của bạn hiển thị rõ ràng bất kể nền trang.

Sao chép Mã

Phần đầu ra mã cung cấp hai tab:

HTML — Cấu trúc markup cho loader của bạn
CSS — Các kiểu hoàn chỉnh với các giá trị tùy chỉnh của bạn (màu sắc, kích thước, tốc độ đã được giải quyết)

Nhấp vào nút Sao chép để sao chép mã của tab hoạt động vào clipboard của bạn. Dán HTML vào trang của bạn và thêm CSS vào bảng kiểu của bạn.

Tính năng

43 Mẫu Loader Được Chọn lọc

Mỗi loader trong bộ sưu tập của chúng tôi được thiết kế cẩn thận để có sức hấp dẫn trực quan và sẵn sàng sản xuất. Từ các vòng quay đơn giản đến các hoạt ảnh khối 3D phức tạp, có một loader cho mọi trường hợp sử dụng.

Tất cả các loader sử dụng CSS thuần mà không có phụ thuộc JavaScript.

Tùy chỉnh Thời gian Thực

Tinh chỉnh mọi khía cạnh của loader của bạn bằng các điều khiển trực quan. Các thay đổi đối với màu sắc, kích thước và tốc độ được áp dụng ngay lập tức trong bản xem trước trực tiếp.

Không cần tạo lại hoặc làm mới — xem các thay đổi của bạn ngay lập tức.

Chuyển đổi Xem trước Nền

Xem trước loader của bạn trên nền sáng, tối và trong suốt để đảm bảo nó hoạt động tốt trong bất kỳ bối cảnh nào.

Mẫu bàn cờ trong suốt giúp bạn xác minh rằng loader của bạn không có các hiện vật nền không mong muốn.

Đầu ra Mã Sẵn sàng Sản xuất

CSS được tạo chứa các giá trị đã giải quyết thay vì các biến. Điều này có nghĩa là bạn nhận được các kích thước pixel chính xác, các màu cụ thể và các giá trị thời gian chính xác.

Sẵn sàng để dán trực tiếp vào dự án của bạn mà không cần bất kỳ thiết lập bổ sung nào.

HTML và CSS Riêng biệt: Mã được chia thành các tab HTML và CSS chuyên dụng, giúp dễ dàng sao chép từng phần đến đúng vị trí trong dự án của bạn. HTML cung cấp markup ngữ nghĩa tối thiểu trong khi CSS xử lý tất cả các kiểu trực quan và hoạt ảnh.

Các Câu hỏi Thường gặp

Các loader có yêu cầu JavaScript không?

Không. Tất cả các loader được xây dựng bằng hoạt ảnh CSS thuần và keyframe. Bạn chỉ cần markup HTML và kiểu CSS — không cần JavaScript để các hoạt ảnh hoạt động.

Tôi có thể thay đổi màu loader sau khi sao chép mã không?

Có. CSS được tạo sử dụng các giá trị màu rõ ràng (ví dụ: #6366f1). Chỉ cần tìm và thay thế giá trị màu trong CSS để thay đổi nó.

Mẹo chuyên nghiệp: Để tạo chủ đề dễ dàng hơn, bạn có thể thay thế màu bằng thuộc tính tùy chỉnh CSS như var(--loader-color).

Các loader có đáp ứng không?

Các loader sử dụng kích thước tương đối dựa trên giá trị kích thước bạn đặt. Bạn có thể điều chỉnh kích thước trong trình tạo hoặc sửa đổi các giá trị pixel trong CSS để phù hợp với bố cục của bạn. Sử dụng các thuộc tính tùy chỉnh CSS giúp dễ dàng tạo các loader đáp ứng.

Trình duyệt nào hỗ trợ các loader này?

Tất cả các loader hoạt động trong các trình duyệt hiện đại bao gồm Chrome, Firefox, Safari và Edge. Chúng sử dụng các tính năng CSS tiêu chuẩn như @keyframes, border-radius và transform được hỗ trợ rộng rãi.

Tôi có thể sử dụng các loader này trong các dự án thương mại không?

Có. Mã CSS được tạo có thể tự do sử dụng trong bất kỳ dự án nào, bao gồm các dự án thương mại. Không cần ghi công.

Làm cách nào để làm cho loader xuất hiện trong quá trình tải trang?

Thêm HTML loader vào trang của bạn và hiển thị nó theo mặc định. Khi nội dung của bạn tải xong, sử dụng JavaScript để ẩn hoặc xóa phần tử loader.

Một cách tiếp cận phổ biến là thêm một lớp CSS làm mờ loader bằng một chuyển đổi:

Ví dụ Triển khai

// Hide loader when page loads
window.addEventListener('load', function() {
    document.querySelector('.loader').classList.add('fade-out');
});