Tạo loader CSS

Tạo biểu tượng đang tải bằng CSS thuần.

Chọn loại hiệu ứng

Cài đặt

Màu

#6366F1

Kích thước40px

Tốc độ (giây)1.0s

⚡ Giá trị nhỏ hơn = hiệu ứng nhanh hơn

Xem trước — Spinner

Mã CSS

<!-- HTML -->
<div class="loader" style="width:40px;height:40px"></div>

<!-- CSS -->
<style>
.loader {
  border: 4px solid rgba(0,0,0,0.1);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
</style>

CSS VÀ THIẾT KẾ TƯƠNG TỰ

Xem tất cả

Mã nguồn thành ảnh

Biến đoạn mã thành ảnh chụp màn hình đẹp mắt.

Mở →

Tạo gradient CSS

Thiết kế gradient tuyến tính, tỏa tròn và conic bằng giao diện trực quan, sao chép CSS ngay.

Mở →

Glassmorphism CSS

💬 Bình luận

Chưa có bình luận nào. Hãy là người đầu tiên!

Tạo loader CSS LÀ GÌ?

Chọn trong 10 hoạt ảnh tải thuần CSS, chỉnh màu, kích thước và tốc độ, rồi sao chép HTML và CSS. Không cần JavaScript nên gắn được vào mọi trang hoặc framework.

Cách sử dụng

Chọn trong 10 loại hoạt ảnh: spinner cho tải toàn trang, chấm cho chỉ báo trò chuyện, skeleton cho giữ chỗ nội dung, ripple cho phản hồi nút, và nhiều hơn nữa.
Điều chỉnh màu (bộ chọn), kích thước (20–80px) và tốc độ (0,3–3,0 giây) ở bên trái. Bản xem trước lưới chấm bên phải cập nhật trực tiếp.
Tốc độ thấp hơn = hoạt ảnh nhanh hơn. 0,8–1,5 giây phù hợp nhất với đa số loader; dưới 0,5 giây thấy cuống cuồng, trên 2 giây thấy như đứng hình.
Ba nút sao chép ở tiêu đề xem trước: “HTML” chỉ phần đánh dấu, “CSS” chỉ phần kiểu, “Sao chép tất cả” cho khối đầy đủ có chú thích.
Mọi hoạt ảnh đều là CSS thuần không phụ thuộc JavaScript — dán thẳng vào HTML tĩnh, React, Vue hay bất kỳ framework nào.

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

Có những kiểu hiệu ứng tải CSS nào?

Vòng tròn xoay, chấm nảy, thanh tiến trình, sóng, nhịp đập và nhiều kiểu khác — toàn bộ là CSS thuần.

Các hiệu ứng này có cần JavaScript không?

Không. Mọi hiệu ứng đều là CSS thuần, không phụ thuộc JavaScript.

Tôi có thể tùy chỉnh màu và kích thước không?

Có. Bộ chọn màu và điều khiển kích thước, có xem trước tức thì và mã CSS xuất ra.

 <div class="loader" style="width:40px;height:40px"></div>  <style> .loader { border: 4px solid rgba(0,0,0,0.1); border-top-color: #6366f1; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } </style>