Loading Spinner Pure CSS

Dưới đây là một loading spinner hiện đại được xây dựng hoàn toàn bằng CSS thuần, không phụ thuộc vào bất kỳ hình ảnh hay đoạn mã JavaScript nào. Sự kết hợp giữa conic-gradient và mask (hoặc -webkit-mask) tạo ra một hiệu ứng chuyển động gradient mượt mà chạy dọc theo đường tròn.

Xem trước (Preview)

Mã nguồn (Source Code)

Bạn có thể dễ dàng thêm spinner này vào dự án của mình bằng cách copy và paste đoạn HTML và CSS bên dưới.

<!-- HTML -->
<div class="premium-spinner"></div>

/* CSS */
.premium-spinner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: conic-gradient(
    from 90deg at 50% 50%,
    rgba(99, 102, 241, 0) 0%,
    rgba(99, 102, 241, 0.2) 20%,
    rgba(99, 102, 241, 1) 100%
  );
  /* Cài đặt mask để cắt bỏ phần bên trong */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
  animation: premium-spin 1s infinite linear;
}

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

Giải thích chi tiết

• conic-gradient: Tạo ra một gradient xoay quanh một điểm trung tâm, giống như biểu đồ tròn. Trong spinner này, nó tạo hiệu ứng chuyển màu mượt mà từ trong suốt (rgba(99, 102, 241, 0)) sang đậm dần (rgba(99, 102, 241, 1)), tạo thành hiệu ứng “đuôi” khi quay.
• mask / -webkit-mask: Sử dụng radial-gradient làm mask để “đục thủng” phần ruột bên trong, chỉ giữ lại phần viền tròn. Bạn có thể thay đổi độ dày của đường viền spinner (ở đây là 6px) bằng cách tùy chỉnh thông số trong hàm calc(100% - 6px).
• animation: Kết hợp thuộc tính transform: rotate(360deg) trong @keyframes với tốc độ linear để đảm bảo spinner xoay tròn liên tục và đều đặn.