Trình tạo CSS Loader

Mã CSS được tạo hoạt động thế nào

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

Spinner là một hình tròn vẽ bằng đường viền dày. Thuộc tính border-top-color chỉ tô màu phần trên của vòng tròn bằng màu nhấn, nên vòng tròn trông như một cung, và quy tắc @keyframes spin xoay nó quanh tâm. Xoay bằng transform: rotate() giúp hoạt ảnh nhẹ nhàng, vì trình duyệt di chuyển phần tử trên compositor thay vì vẽ lại từng khung hình.

Để hiển thị nó trên trang, hãy thêm một phần tử và nạp mã CSS:

<div class="loader" role="status" aria-label="Đang tải"></div>

Đảm bảo khả năng tiếp cận

• Thêm role="status" để trình đọc màn hình thông báo spinner.
• Đặt aria-label với văn bản trạng thái, ví dụ “Đang tải”.
• Đừng che nội dung sau spinner quá vài giây mà không có phương án dự phòng khi hết thời gian chờ.
• Tôn trọng prefers-reduced-motion. Với người dùng đã tắt hiệu ứng chuyển động, hãy thay vòng quay bằng hiệu ứng mờ dần đơn giản hoặc dòng chữ tĩnh “Đang tải…”:

@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; background: currentColor; opacity: .4; }
}

Khi nào dùng spinner, khi nào dùng giao diện lạc quan

• Phản hồi dưới 100 ms: không cần spinner; mắt người gần như không nhận ra độ trễ.
• 100 ms – 1 giây: một spinner tinh tế (vòng tròn nhỏ, chữ trên nút “Đang tải…”) giúp ngăn nhấp đúp.
• 1 giây – 10 giây: một spinner nổi bật, lý tưởng là có hiển thị tiến trình nếu đo được.
• > 10 giây: đây không phải vấn đề của spinner; hãy tìm xem cái gì chậm và khắc phục.

Với việc gửi biểu mẫu và nhấp nút, spinner nằm ngay trong nút thường tốt hơn một lớp phủ toàn trang.