Progress

Seberapa jauh sebuah proses berjalan: unggahan berkas, kuota yang terpakai, atau capaian target daur ulang.

Dasar

Berikan value dan nama yang berarti. max membuat nilainya bisa memakai satuan aslinya, dan valueText menuliskannya dengan kata-kata aplikasi sendiri.

Ring

Bentuk ring untuk satu angka di kartu ringkasan atau di samping baris tabel — tempat yang tidak punya ruang memanjang. Angkanya duduk di tengah ring.

Belum diketahui

Selama server belum memberi angka, pakai indeterminate: bilahnya menggeser potongan pendek dan komponen tidak melaporkan nilai apa pun. Begitu angkanya datang, lepaskan propnya dan bilah yang sama melanjutkan.

Belum ada berkas yang diunggah.

API

Props

Prop	Tipe	Default	Keterangan
value	number	0	Sudah sampai mana, antara 0 dan max.
max	number	100	Batas atasnya. Dengan max sendiri, value bisa memakai satuan aslinya — 2,1 dari 5 ton.
variant	'bar' \| 'ring'	'bar'	bar untuk proses yang punya tempat memanjang, ring untuk angka tunggal di kartu atau toolbar.
size	'sm' \| 'md' \| 'lg'	'md'	Tebal bilah, atau diameter ring.
color	'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'	'primary'	Nada isian. Pilih sesuai arti angkanya, bukan selera.
label	string	'Progres'	Nama progresnya, dibacakan sebelum nilainya. Ganti dengan apa yang sedang berjalan — tanpa nama, pembaca layar hanya menyebut angka.
showValue	boolean	false	Menuliskan angkanya di samping bilah atau di tengah ring. Teks ini aria-hidden karena nilainya sudah dibacakan dari progressbar-nya.
valueText	string	—	Teks pengganti persentase, misalnya "2,1 dari 5 ton". Ikut menjadi aria-valuetext.
indeterminate	boolean	false	Ada yang sedang berjalan tetapi angkanya belum diketahui. Nilainya sengaja tidak dilaporkan — 0% akan menjadi kabar yang salah.

Elemennya role="progressbar" dengan aria-valuemin, aria-valuemax, aria-valuenow, dan aria-valuetext. Untuk proses yang hasilnya perlu diumumkan setelah selesai, tulis kalimatnya sendiri di role="status" seperti pada contoh unggahan di atas — progressbar melaporkan angka, bukan kabar.

Untuk kondisi loading yang bentuknya meniru isi halaman, pakai Skeleton. Progress dipakai ketika ada angka yang bergerak.