Tạo loader CSS
Tạo hoạt ảnh tải CSS tùy chỉnh.
<div class="loader"></div>.loader {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #D94F30;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}Trình tạo hoạt ảnh loading CSS thuần
Hoạt ảnh loading (loader hoặc spinner) là yếu tố trực quan thiết yếu trong mọi ứng dụng web hiện đại. Cho người dùng biết hệ thống đang xử lý yêu cầu, cải thiện trải nghiệm bằng cách cung cấp phản hồi trực quan trong thời gian chờ. Loader CSS thuần đặc biệt có lợi vì không cần JavaScript, hình ảnh hay thư viện bên ngoài, giúp cực kỳ nhẹ và tải nhanh.
Trình tạo bao gồm tám loại loader khác nhau: spinner cổ điển, chấm nảy, thanh equalizer, xung mở rộng, nảy kép, vòng xoay, hình vuông 3D và sóng đồng tâm. Mỗi loại có thể tùy chỉnh màu (bất kỳ giá trị hex nào), kích thước (16 đến 80 pixel) và tốc độ hoạt ảnh (0,3 đến 3 giây mỗi chu kỳ).
Mã được tạo là CSS thuần với hoạt ảnh @keyframes, không phụ thuộc bên ngoài. Bạn có thể sao chép HTML và CSS riêng hoặc cùng nhau, dán trực tiếp vào dự án. Loader hoàn toàn responsive và hiển thị tốt trên mọi thiết bị và độ phân giải màn hình.
Câu hỏi thường gặp
Loader có dùng JavaScript không?
Không, tất cả loader đều 100% CSS thuần sử dụng hoạt ảnh @keyframes. Không cần JavaScript, giúp chúng cực kỳ hiệu quả và dễ triển khai trong bất kỳ dự án web nào.
Có tương thích với tất cả trình duyệt không?
Có, hoạt ảnh CSS @keyframes và các thuộc tính được sử dụng tương thích với tất cả trình duyệt hiện đại, bao gồm Chrome, Firefox, Safari, Edge và Opera. Không cần tiền tố nhà cung cấp cho các trình duyệt hiện tại.
Có thể dùng nhiều loader trên cùng một trang không?
Có, nhưng hãy đổi tên class ".loader" cho mỗi phiên bản khác nhau (ví dụ ".spinner-1", ".spinner-2") để tránh xung đột style giữa các loại loader.