Trình tạo CSS spinner đơn giản

Vì sao spinner này đơn giản

Nhiều loader dùng nhiều phần tử lồng nhau, ảnh nền hoặc tập lệnh. Loader này chỉ là một div được định kiểu thành hình tròn. Vòng tròn được tạo bởi viền, và chỉ phần trên của viền có màu khác. Khi hình tròn xoay, phần có màu di chuyển quanh vòng. Toàn bộ kỹ thuật dựa trên bốn ý:

1. Một hộp vuông có chiều rộng và chiều cao bằng nhau.
2. border-radius: 50% để biến hộp thành hình tròn.
3. Một viền xám với một cạnh có màu, đó là border-top-color.
4. Một hoạt ảnh xoay không bao giờ dừng.

Mã đầy đủ

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

<div class="loader"></div>

Đó là toàn bộ loader. Không có gì cần tải xuống và không có phụ thuộc nào cần giữ cập nhật.

Căn giữa

Vòng là một phần tử khối thông thường. Để căn giữa nó trên trang hoặc trong một vùng chứa, thêm margin: 0 auto; vào .loader để căn ngang, hoặc biến phần tử cha thành vùng chứa flex:

.loading-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

Công cụ này không làm gì

• Công cụ chỉ tạo kiểu dáng của vòng. Hàng chấm, thanh và loader nhịp đập là các thiết kế khác.
• Màu track cố định là xám nhạt; nếu nền bạn tối, hãy sửa trong CSS đã dán.
• Công cụ không thêm thuộc tính trợ năng vào markup của bạn. Hãy tự thêm role="status" và aria-label vào phần tử.

Chỉnh sửa nhỏ sau khi sao chép

Vì spinner chỉ gồm vài thuộc tính, việc chỉnh sửa rất dễ. Để vòng trông nhẹ hơn, hãy giảm độ dày viền. Để nó dịu hơn, hãy tăng thời gian hoạt ảnh. Để dùng cùng một loader ở hai kích thước, hãy sao chép lớp một lần và chỉ ghi đè width, height và border-width trong lớp thứ hai. Việc mã ngắn gọn chính là ưu điểm lớn nhất của spinner đơn giản: bạn có thể đọc toàn bộ mã trong nháy mắt và đổi bất kỳ giá trị nào mà không cần tìm trong thư viện.

Bạn cũng có thể tô màu cho track bằng cách đổi #eee thành màu hợp với trang, trong khi cung đang chuyển động giữ màu bạn đã chọn trong trình tạo.