Cách dùng Trình tạo CSS Loader
- Nhấp vào một loader trong thư viện — mỗi ô đều hoạt động trực tiếp.
- Điều chỉnh kích thước, độ dày, tốc độ và màu sắc; tất cả ô sẽ cập nhật cùng lúc.
- Đổi tên class CSS nếu nó trùng với dự án của bạn.
- Sao chép HTML và CSS (hoặc phiên bản React) rồi dán vào trang của bạn.
Vì sao nên dùng loader CSS thuần?
Một spinner CSS chỉ có vài trăm byte, không cần tải thêm hình ảnh hay JavaScript, hiển thị sắc nét ở mọi kích thước và có thể đổi màu chỉ với một biến. Mỗi loader ở đây được tạo từ một phần tử duy nhất (cùng vài thẻ span cho chấm và thanh) và được tạo chuyển động bằng transform và opacity, nên vẫn mượt ngay cả khi luồng chính đang bận tải ứng dụng của bạn.
Tùy chỉnh bằng biến CSS
CSS được tạo ra cung cấp --size, --color, --track, --thickness và --speed trên class của loader, nên bạn có thể tạo biến thể nhỏ màu trắng cho nút mà không cần sao chép CSS: <span class="loader" style="--size:18px;--color:#fff">.
Khả năng truy cập
- Loader có
role="status"và nhãn “Đang tải…” ẩn khỏi giao diện, nên trình đọc màn hình sẽ thông báo cho người dùng. - Khi bật chế độ giảm chuyển động, hoạt ảnh sẽ chậm lại thay vì dừng hẳn — spinner bị đứng yên trông giống như ứng dụng bị lỗi.
- Chỉ hiển thị loader sau khoảng 300 ms; nếu nhấp nháy cho các yêu cầu nhanh, người dùng sẽ thấy chậm hơn so với không hiển thị gì.
Bạn muốn hiệu ứng loading tùy chỉnh? Hãy tạo nó trong trình tạo animation CSS và tinh chỉnh easing bằng trình tạo cubic-bezier.
Cũng được tìm dưới tên: css loader, css spinner, loading spinner css, tạo css loader, hiệu ứng loading css, css preloader, spinner css thuần, loading animation css.
Các công cụ dùng kèm tốt với Trình tạo CSS Loader
- Tạo CSS Gradient — Thiết kế gradient trực quan: kéo các điểm màu, đổi góc hoặc kiểu, chọn sẵn một mẫu có sẵn rồi sao chép CSS dùng được ngay, kèm màu nền đặc làm phương án dự phòng.
- Tạo Box Shadow CSS — Xếp nhiều lớp bóng đổ, chỉnh độ lệch, blur, spread và độ trong suốt trên thẻ xem trước trực tiếp, rồi sao chép CSS box-shadow hoặc text-shadow.
- Trình tạo CSS Keyframes — Trình chỉnh sửa trực quan cho @keyframes.
- Tạo hiệu ứng hover CSS — Thiết kế animation hover cho nút, thẻ, liên kết và icon.
Câu hỏi thường gặp
Tôi có thể dùng các loader này trong dự án thương mại không?
Làm sao để chỉ hiển thị loader khi có dữ liệu đang tải?
hidden) khi dữ liệu về. Trong React, bạn có thể render có điều kiện: {loading && <Loader />}.Loader có hoạt động bên trong nút bấm không?
style="--size:16px;--thickness:2px;--color:currentColor".