Skip to main content
LanguageBahasa Indonesia
Dasar-dasar5 menit membacaOktober 2026

Bagaimana cara kerja status pemuatan?

Jawaban singkat

Status pemuatan yang baik memberi tahu orang-orang bahwa sesuatu sedang terjadi, kira-kira berapa lama waktu yang dibutuhkan, dan apa yang akan muncul. Untuk waktu tunggu yang sangat singkat, jangan tampilkan apa pun atau sedikit perubahan. Selama beberapa detik, gunakan kerangka atau spinner di dekat tempat konten akan muncul. Untuk tugas yang panjang, tunjukkan kemajuan dan biarkan orang terus mengerjakannya atau membatalkannya.

Pengambilan Inti

  • Cocokkan indikator dengan penantian: tidak ada, halus, berputar atau kerangka, lalu maju
  • Kerangka berfungsi paling baik jika tata letak konten yang akan datang diketahui
  • Tunjukkan status pemuatan di mana konten akan muncul, tidak hanya di pojok
  • Pertahankan tombol yang memulai tindakan dalam status memuat untuk mencegah pengiriman ganda
  • Patuhi pengaturan gerakan yang dikurangi dan jaga agar animasi pemuatan tetap tenang

Status pemuatan ada untuk menjawab satu pertanyaan bagi pengguna: apakah terjadi sesuatu? Tanpa jawaban, orang-orang mengetuk lagi, memuat ulang halaman atau keluar. Jawaban yang benar tergantung pada berapa lama mereka menunggu.

Untuk waktu tunggu yang sangat singkat, kurang dari sepersepuluh detik, kebanyakan orang tidak menyadari adanya penundaan, sehingga indikator hanya menambahkan kedipan. Teknik yang umum dilakukan adalah menunggu sebentar sebelum menampilkan spinner, sehingga respons cepat tidak akan pernah menampilkan spinner sama sekali.

Untuk menunggu satu detik atau beberapa detik, tampilkan umpan balik di mana hasilnya akan muncul. Layar kerangka, garis abu-abu dari tata letak yang akan datang, berfungsi dengan baik untuk daftar, kartu, dan profil karena menunjukkan apa yang akan datang dan mengurangi pergeseran tata letak. Pemintal berfungsi untuk area kecil atau ketika hasilnya tidak dapat diprediksi bentuknya.

Untuk tugas-tugas yang panjang seperti pengunggahan, ekspor, atau pembuatan AI, tunjukkan kemajuan nyata jika Anda dapat mengukurnya, jelaskan apa yang terjadi, dan biarkan orang membatalkan atau melanjutkan pekerjaan lain. Pemintal yang berputar sebentar tanpa informasi lain terasa seperti gagal.

Kontrol yang memulai aksi memerlukan negara juga. Tombol kirim yang beralih ke status memuat, dan tidak dapat ditekan dua kali, mencegah duplikat pesanan dan pesan. Saat pemuatan berakhir, pindahkan dengan jelas ke sukses atau kesalahan daripada diam-diam kembali ke default.

Animasi membantu di sini, tetapi jaga agar tetap tenang dan pendek dalam satu putaran, dan hormati pengaturan gerakan yang dikurangi. ExodeUI, yang kami buat, memungkinkan Anda mendesain pemuat atau tombol dengan status pemuatan, keberhasilan, dan kesalahan dalam satu file tempat kode Anda dialihkan.

Pertanyaan yang sering diajukan

Layar pemintal atau kerangka: mana yang lebih baik?

Kerangka akan lebih baik jika Anda mengetahui bentuk konten yang akan datang, seperti daftar atau kartu. Pemintal lebih baik untuk area kecil atau konten yang tidak diketahui.

Berapa lama sebelum menampilkan indikator pemuatan?

Banyak tim menunggu beberapa ratus milidetik agar respons cepat tidak pernah terjadi. Uji dengan waktu respons Anda yang sebenarnya.

Haruskah animasi pemuatan berulang selamanya?

Hanya ketika tugas benar-benar berjalan. Jika memerlukan waktu lebih lama dari yang diharapkan, tampilkan pesan, kemajuan, atau cara untuk membatalkan.

Bagaimana cara menampilkan pemuatan di sebuah tombol?

Ganti atau lengkapi label dengan indikator kecil, pertahankan ukuran tombol tetap sama agar tata letak tidak loncat-loncat, dan blokir penekanan berulang hingga permintaan berakhir.

Panduan & Contoh Terkait

Coba tombol dengan status pemuatan nyata

Buka contoh interaktif dengan status pemuatan, keberhasilan, dan kesalahan, dibuat sebagai file ExodeUI asli yang dapat Anda edit.

Buka contohnya
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →