Indikator progres

Komponen CircularProgressIndicator adalah tampilan melingkar dari durasi proses atau waktu tunggu yang tidak ditentukan.

Gunakan indikator progres untuk menunjukkan proporsi tugas yang telah selesai. Untuk menampilkan progres, indikator dianimasikan di sepanjang jalur melingkar searah jarum jam.

Anda dapat menerapkan indikator progres ke komponen seperti tombol putar.

Anatomi

A. Jalur
B. Progres jalur

Rekomendasi desain

Indikator progres dengan kesenjangan

Buat indikator progres dengan jeda untuk memberikan ruang bagi informasi penting seperti waktu. Untuk membuat jeda, ubah startAngle dan endAngle indikator progres.

Buat indikator progres dengan jeda, seperti yang ditunjukkan pada contoh berikut:

CircularProgressIndicator(
    progress = 0.4f,
    modifier = Modifier.fillMaxSize(),
    startAngle = 290f,
    endAngle = 250f,
    strokeWidth = 4.dp
)

Indikator progres kecil

Terapkan indikator progres kecil secara langsung ke tombol saat progres yang ditunjukkan terkait langsung dengan tindakan yang diwakili oleh tombol dan saat ruang layar terbatas.

Anda dapat membuat indikator progres kecil, seperti yang ditunjukkan pada contoh berikut:

CircularProgressIndicator(
    progress = 0.75,
    modifier = Modifier.fillMaxSize(),
    startAngle = 0,
    indicatorColor = MaterialTheme.colors.secondary,
    trackColor = MaterialTheme.colors.onBackground.copy(alpha = 0.1f),
    strokeWidth = 4.dp
)

Indikator progres tidak tentu

Saat menggunakan indikator progres untuk situasi saat tidak ada waktu yang ditetapkan, gunakan indikator progres dengan nilai animasi. Ini juga dapat disebut indikator lingkaran berputar. Gunakan indikator lingkaran berputar seperlunya, karena waktu tunggu dapat terkesan lebih lama.

Anda dapat membuat indikator progres tidak tentu, seperti yang ditunjukkan pada contoh berikut:

CircularProgressIndicator(
    indicatorColor = MaterialTheme.colors.secondary,
    trackColor = MaterialTheme.colors.onBackground.copy(alpha = 0.1f),
    strokeWidth = 4.dp
)

Penggunaan

Lihat contoh indikator progres berikut.