Loading

Loading memberi tahu pengguna bahwa sistem sedang memproses permintaan atau memuat data yang belum siap ditampilkan. Komponen ini membantu menjaga persepsi kinerja aplikasi tetap baik dan mencegah kebingungan saat pengguna menunggu.

Penggunaan

Gunakan komponen ini untuk memberi umpan balik visual ketika sistem sedang memuat halaman, mengambil data, atau memproses tindakan pengguna. Pastikan jenis indikator yang digunakan sesuai dengan durasi dan konteks, agar pengguna tahu bahwa aplikasi masih berjalan dan tidak berhenti bekerja.

Varian

Spinner

Berbentuk lingkaran berputar, cocok untuk proses singkat (kurang dari 3 detik) yang tidak membutuhkan informasi progres.

Progress Bar

Menampilkan batang progres horizontal dengan indikator persentase, digunakan untuk proses yang berdurasi menengah hingga panjang.

Skeleton

Berfungsi sebagai placeholder berbentuk bayangan komponen (seperti teks, kartu, atau gambar) untuk menunjukkan struktur konten yang sedang dimuat.

Cara Penggunaan yang Disarankan

Spinner

Gunakan hanya untuk durasi pendek. Jika durasi melebihi 3 detik, ganti dengan skeleton atau progress bar agar pengguna tetap merasa proses berjalan.

Progress Bar

Sebaiknya menunjukkan progres nyata, bukan animasi berulang tanpa akhir yang bisa membingungkan pengguna.

Skeleton

Sesuaikan bentuk dengan struktur konten final, agar pengguna dapat mengantisipasi layout yang akan muncul (misalnya kotak untuk gambar, garis untuk teks).