Spinner Loading CSS Murni

Spinner loading modern yang dibangun sepenuhnya dengan CSS, tanpa melibatkan gambar atau JavaScript sama sekali. Melalui kombinasi conic-gradient dan mask (atau -webkit-mask), spinner ini menghasilkan animasi elegan dengan lintasan gradasi yang halus.

Pratinjau

Kode Implementasi

Anda dapat mengimplementasikan spinner ini dengan mudah hanya dengan menyalin dan menempelkan kode di bawah ini ke dalam file HTML dan CSS proyek Anda.

<!-- 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%
  );
  /* Pengaturan mask untuk memotong bagian dalam */
  -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);
  }
}

Penjelasan Kode

• conic-gradient: Membuat gradasi warna yang melingkar dari titik pusat. Pada spinner ini, efek lintasan berputar diekspresikan melalui transisi warna yang mulus—dari transparan (rgba(99, 102, 241, 0)) ke warna solid (rgba(99, 102, 241, 1)).
• mask / -webkit-mask: Menggunakan radial-gradient sebagai masker (mask) untuk membuat area tengah elemen menjadi transparan. Anda dapat menyesuaikan ketebalan garis putaran (pada contoh ini: 6px) melalui kalkulasi calc(100% - 6px).
• animation: Menerapkan transform: rotate(360deg) pada aturan @keyframes agar elemen berputar tanpa batas dengan kecepatan konstan menggunakan opsi linear.