Trình tạo Loader CSS
Công cụ tạo CSS loader tạo hiệu ứng tải thuần CSS với sáu kiểu — spinner, chấm nảy, vòng, pulse, thanh và vòng đôi — có thể chỉnh kích thước, màu, tốc độ và độ dày, xuất cả CSS lẫn HTML.
Về công cụ này
Công cụ tạo CSS loader tạo hiệu ứng tải thuần CSS với sáu kiểu — spinner, chấm nảy, vòng, pulse, thanh và vòng đôi — có thể chỉnh kích thước, màu, tốc độ và độ dày, xuất cả CSS lẫn HTML.
Cách sử dụng
- Chọn một kiểu loader.
- Điều chỉnh kích thước, màu, tốc độ và độ dày.
- Xem bản xem trước trực tiếp.
- Bấm Copy CSS + HTML rồi dán cả hai vào trang của bạn.
Điều nên biết
- Loader thuần CSS không cần ảnh, GIF hay JavaScript.
- Spinner xoay bằng @keyframes và transform: rotate(), cách tạo chuyển động rất hiệu quả.
- Mã HTML chỉ là một phần tử, hoặc vài phần tử con cho kiểu chấm và thanh.
- Thêm role="status" và một nhãn ẩn như “Loading…” để trình đọc màn hình thông báo loader.
- Hãy cân nhắc làm chậm hoặc tạm dừng loader khi có prefers-reduced-motion.
Chạy hoàn toàn trong trình duyệt của bạn — không có dữ liệu nào bạn nhập được tải lên hay lưu lại.
Câu hỏi thường gặp
Làm sao để tạo spinner tải bằng CSS?
Cho một phần tử vuông có viền với một cạnh tô màu, border-radius: 50% và animation @keyframes xoay — hoặc sao chép một mẫu từ công cụ này.
Loader CSS có tốt hơn GIF không?
Thường là có: chúng nhẹ hơn, sắc nét ở mọi kích thước, và có thể đổi màu, tốc độ bằng CSS.
Làm sao để loader thân thiện với khả năng tiếp cận?
Đặt nó trong một phần tử có role="status" và thêm chữ ẩn như “Loading…” để công nghệ hỗ trợ có thể thông báo.
Làm sao để căn giữa loader trên trang?
Đặt nó trong một container có display: flex; justify-content: center; align-items: center;.