Generator CSS Spinner untuk Overlay

Dua bagian: spinner dan overlay

Generator menghasilkan spinner: kelas .loader dan aturan @keyframes spin. Overlay adalah pembungkus terpisah yang Anda tambahkan sendiri. Pembungkus ini menutupi seluruh area tampilan dan memusatkan elemen anaknya. Pemisahan ini berguna karena Anda bisa memakai ulang spinner yang sama pada tombol atau kartu, dan hanya memakai pembungkus saat Anda membutuhkan status yang memblokir.

CSS pembungkus

Tempel ini setelah aturan yang dihasilkan:

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  z-index: 1000;
}

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

position: fixed dengan inset: 0 membentangkan lapisan ke keempat tepi layar. Pengaturan flex memusatkan spinner ke dua arah. z-index menjaga lapisan tetap di atas konten biasa, jadi naikkan nilainya jika header atau modal masih berada di atasnya.

Menutupi satu area, bukan seluruh halaman

Jika hanya kartu atau tabel yang sedang dimuat, berikan kontainernya position: relative dan ubah pembungkusnya menjadi position: absolute:

.panel { position: relative; }
.panel .overlay { position: absolute; }

Bagian halaman lainnya tetap bisa digunakan, dan hanya panel itu yang diredupkan.

Pilih warna overlay yang sesuai dengan halaman

Pada halaman gelap, ubah juga warna jalur #eee di CSS loader yang Anda tempel agar ring tidak terlalu menyala.

Praktik yang baik

• Hapus overlay segera setelah pekerjaan selesai, atau halaman akan terus terblokir.
• Gunakan untuk waktu tunggu yang singkat. Untuk operasi yang panjang, tampilkan teks yang menjelaskan apa yang sedang terjadi.
• Markup overlay dan penanganan fokusnya adalah kode Anda sendiri. Alat ini hanya menghasilkan spinner.

Hentikan halaman agar tidak bisa digulir

Overlay tetap yang menutupi halaman tidak menghentikan halaman di belakangnya agar tetap bisa digulir dengan roda mouse atau sentuhan. Jika hal ini penting, tambahkan overflow: hidden; pada body selama overlay terlihat, dan hapus saat overlay menghilang. Kaitkan aturan itu dengan momen yang sama ketika Anda menampilkan dan menyembunyikan overlay, agar keduanya tidak pernah tidak sinkron.