Trình tạo spinner cho nút bằng CSS

Một ví dụ thực hành

Giả sử bạn có một nút “Lưu” màu xanh đậm với chữ trắng. Trong trình tạo, nhập kích thước 16, độ dày 2, màu #ffffff và tốc độ 0,8. Công cụ sẽ tạo ra:

.loader {
  width: 16px;
  height: 16px;
  border: 2px solid #eee;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

Track của vòng có màu xám nhạt cố định, nhìn rõ trên nút tối. Nếu bạn muốn track dịu hơn, hãy đổi #eee thành một giá trị bán trong suốt như rgba(255, 255, 255, 0.3) trong CSS đã dán. Màu cung vẫn là màu bạn đã chọn.

Đặt spinner bên trong nút

Đặt phần tử spinner trước nhãn và biến nút thành một hàng flex để chúng nằm trên cùng một dòng với khoảng cách:

<button class="save" type="submit" disabled>
  <span class="loader" role="status" aria-label="Đang lưu"></span>
  Đang lưu
</button>

.save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

Chỉ thêm spinner và trạng thái disabled khi yêu cầu đang chạy. Xóa cả hai khi yêu cầu hoàn tất. Việc vô hiệu hóa nút ngăn gửi trùng lặp; spinner là tín hiệu giải thích lý do.

Kích thước và độ dày cho nút

Ghi chú

• Trình tạo chỉ tạo một vòng tròn. Nó không tạo nút bấm, vì vậy kiểu dáng nút vẫn do bạn quyết định.
• Vòng dày hơn một phần tư đường kính sẽ bị lấp đầy và trông như một đĩa, vì vậy hãy dùng giá trị mỏng cho kích thước nhỏ.
• Giữ nhãn bên cạnh spinner. Một spinner không có chữ có thể khó hiểu với một số người dùng.

Tránh làm nhảy bố cục

Nếu spinner xuất hiện và nút đột ngột rộng ra, bố cục sẽ bị xô lệch và vùng nhấp chuột sẽ dịch chuyển. Có hai cách đơn giản để khắc phục. Đặt cho nút một chiều rộng tối thiểu đủ chứa spinner và nhãn dài hơn. Hoặc dành sẵn chỗ cho spinner ngay từ đầu bằng cách hiển thị một ô giữ chỗ trống 16 px trước nhãn. Vì vòng được tạo có chiều rộng và chiều cao cố định theo pixel, nên rất dễ dành đúng khoảng không gian nó cần.