Generator CSS Loading Spinner

Yang Anda dapatkan

Generator menulis dua aturan: kelas .loader dan blok @keyframes spin. Kelas menggambar lingkaran, memberinya ring abu-abu muda, dan mewarnai tepi atas ring tersebut. Keyframes memutar lingkaran satu putaran penuh, dan baris animation mengulanginya tanpa henti. Tidak ada yang lain yang dibutuhkan: tanpa file gambar, tanpa font ikon, dan tanpa skrip.

Dengan nilai bawaan (60 px, ring 6 px, #10b981, 1 detik), hasilnya terlihat seperti ini:

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

Tambahkan ke halaman Anda

Tempel CSS ke stylesheet Anda, lalu tambahkan satu elemen kosong di tempat loader harus muncul:

<div class="loader" role="status" aria-label="Memuat"></div>

Tampilkan elemen selama proses berjalan, lalu hapus atau sembunyikan dengan display: none ketika konten sudah tiba. Atribut role dan aria-label memungkinkan pembaca layar mengumumkan statusnya.

Ukuran yang cocok

Patokan praktisnya adalah ketebalan sekitar sepersepuluh diameter. Ring yang jauh lebih tipis tampak pucat pada layar resolusi tinggi, dan yang jauh lebih tebal berubah menjadi gumpalan.

Hal yang perlu diketahui

• Warna jalur tetap abu-abu muda (#eee). Pada latar gelap, ubah nilai itu di CSS yang Anda tempel.
• Alat ini hanya membuat satu spinner berbentuk lingkaran. Titik, batang, dan bentuk lain memerlukan markup yang berbeda.
• Jika proyek Anda sudah memiliki kelas bernama loader atau animasi bernama spin, ganti namanya di CSS yang Anda tempel agar aturannya tidak bertabrakan.

Menampilkan dan menyembunyikan

Loading spinner sebaiknya muncul saat pekerjaan dimulai dan hilang saat pekerjaan selesai. Pola sederhananya adalah menyimpan atribut hidden pada elemen dan menghapusnya ketika permintaan dimulai. Jika waktu tunggunya biasanya sangat singkat, tambahkan jeda beberapa ratus milidetik sebelum ring ditampilkan, agar respons cepat tidak membuat spinner berkedip sesaat. Apa pun pilihan Anda, sembunyikan juga spinner ketika terjadi galat, atau pengunjung akan terus menunggu sesuatu yang sudah gagal.