Loading/Progress Bar (AppProgressBar)
Progress Bar (AppProgressBar)
● Needs Review Web Nuxt 4 + Mobile React Native
Indikator progres linear persentase penyelesaian soal ujian CAT, modul materi, atau proses sinkronisasi jawaban.
<AppProgressBar :value="65" />
Determinate vs. Indeterminate
Gunakan bentuk determinate (:value) kapan pun progres bisa dihitung, seperti jumlah soal terjawab — selalu tampilkan angka/persentase di sampingnya (lihat contoh di bawah), karena bar sendiri saat ini tidak mengumumkan nilainya ke pembaca layar (lihat tab Aksesibilitas). Pakai is-indeterminate hanya untuk proses singkat berdurasi tak pasti seperti sinkronisasi ke server; jangan biarkan animasi indeterminate berjalan lebih dari beberapa detik tanpa keterangan tambahan, karena pengguna tidak punya cara memperkirakan sisa waktu.
Progress Bar Variations
Progres Pengerjaan Soal (72 / 110)65%
Menyimpan Jawaban ke Server...
Props & API Reference
3 properties| Property | Type | Default | Deskripsi |
|---|---|---|---|
| value | number | 0 | Nilai progres. Diterima dalam skala 0–1 atau 0–100 (komponen otomatis mendeteksi mana yang dipakai berdasarkan apakah value ≤ 1). |
| isIndeterminate | boolean | false | Mode animasi tanpa persentase pasti, dipakai saat durasi proses tidak diketahui. |
| appearance | 'default' | 'success' | 'inverse' | 'default' | Warna isian bar; 'inverse' (putih) untuk dipakai di atas latar berwarna solid. |