Spinner

Penanda menunggu tanpa angka, untuk pekerjaan yang durasinya tidak diketahui. Kalau kemajuannya bisa dihitung, angka lebih berguna daripada putaran.

Dasar

Ukuran

Warna

Menemani teks: teksnya yang menyebutkan apa yang ditunggu

Menghitung ulang berat manifest…

Mengikuti warna teks di sekitarnya

Menyinkronkan

Spinner, skeleton, atau progress

  • Spinner untuk menunggu yang tidak punya angka dan tidak punya bentuk — mengirim form, menyimpan, menghitung ulang.
  • Skeleton untuk isi yang bentuknya sudah diketahui. Ia menahan tata letak supaya halaman tidak melompat saat datanya datang; spinner tidak.
  • Progress begitu ada angkanya. Unggahan 40% lebih berguna daripada putaran, dan indeterminate pada Progress menutup masa sebelum angkanya diketahui.

Di dalam Button tidak perlu dipasang sendiri: prop loading sudah menggambarnya, dengan komponen yang sama ini.

Namanya

Putaran tidak membawa arti untuk pembaca layar, jadi spinner yang berdiri sendiri punya role="status" dan nama — ganti bawaan "Memuat" dengan apa yang sebenarnya ditunggu. Spinner yang menemani teks diberi label="", karena teks itulah namanya.

Putarannya berhenti ketika pembaca meminta gerak dikurangi (motion-safe, seperti seluruh animasi di library ini). Yang tetap menyampaikan bahwa sesuatu sedang berjalan adalah namanya, bukan gerakannya — itu sebabnya nama itu bukan pelengkap.

API

PropTipeDefaultKeterangan
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'xs, sm, dan md berukuran sama dengan ikon pada tiga tinggi kontrol (14, 16, 18 piksel), jadi spinner di dalam tombol sama besar dengan ikon yang digantikannya. lg dan xl untuk pemakaian berdiri sendiri.
color'current' | 'primary' | 'neutral' | 'success' | 'warning' | 'danger''current'current mengikuti warna teks di sekitarnya — itu yang dibutuhkan spinner di dalam tombol atau tautan.
labelstring'Memuat'Nama yang dibacakan selama ia berputar. Beri string kosong bila teks di sebelahnya sudah menyebutkan apa yang ditunggu, supaya tidak dibacakan dua kali.