Trình tạo CSS loading spinner

Bạn nhận được gì

Trình tạo viết hai quy tắc: một lớp .loader và một khối @keyframes spin. Lớp vẽ một vòng tròn, cho nó một vòng xám nhạt và tô màu cạnh trên của vòng đó. Keyframes xoay vòng tròn một vòng đầy đủ, còn dòng animation lặp lại việc này mãi mãi. Không cần thêm gì khác: không có tệp hình ảnh, không có phông chữ biểu tượng và không có tập lệnh.

Với các giá trị mặc định (60 px, vòng 6 px, #10b981, 1 giây), kết quả trông như sau:

.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); }
}

Thêm vào trang của bạn

Dán CSS vào bảng định kiểu, rồi thêm một phần tử rỗng ở nơi loader cần xuất hiện:

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

Hiển thị phần tử khi công việc đang chạy, rồi xóa nó hoặc ẩn bằng display: none khi nội dung đã đến. Các thuộc tính role và aria-label cho phép trình đọc màn hình thông báo trạng thái.

Kích thước phù hợp

Quy tắc ngón tay cái là độ dày khoảng một phần mười đường kính. Vòng mỏng hơn nhiều sẽ trông nhạt trên màn hình độ phân giải cao, còn vòng dày hơn nhiều sẽ thành một khối đặc.

Những điều cần biết

• Màu track cố định là xám nhạt (#eee). Trên nền tối, hãy sửa giá trị này trong CSS đã dán.
• Công cụ chỉ tạo một spinner hình tròn. Chấm, thanh và các hình dạng khác cần markup khác.
• Nếu dự án của bạn đã có lớp tên loader hoặc hoạt ảnh tên spin, hãy đổi tên chúng trong CSS đã dán để các quy tắc không xung đột.

Hiển thị và ẩn

Loading spinner nên xuất hiện khi công việc bắt đầu và biến mất khi công việc kết thúc. Một cách đơn giản là giữ thuộc tính hidden trên phần tử và gỡ nó khi yêu cầu bắt đầu. Nếu thời gian chờ thường rất ngắn, hãy thêm độ trễ vài trăm mili giây trước khi hiện vòng, để các phản hồi nhanh không làm spinner nhấp nháy. Dù bạn chọn cách nào, hãy ẩn spinner cả khi có lỗi, nếu không khách truy cập sẽ tiếp tục chờ một thứ đã thất bại.