Mengunggah foto menu, memproses pesanan, menyelesaikan langkah checkout — semuanya adalah tugas yang berjalan menuju titik selesai. Pengguna perlu tahu dua hal: apakah prosesnya masih hidup, dan seberapa jauh kemajuannya. Untuk itu HTML menyediakan satu elemen pelaporan khusus: progress, indikator kemajuan yang tidak butuh JavaScript untuk tampil, tidak butuh CSS untuk dipahami, dan sudah dikenali pembaca layar sejak awal.

Chapter ini membahas atribut value dan max, keadaan indeterminate untuk proses yang belum terukur, serta pola pemakaian yang tepat. Pembandingnya — elemen meter untuk nilai pada skala — dibahas pada chapter berikutnya.

Indikator Kemajuan 0 sampai max #

Aturannya: progress menampilkan posisi sebuah tugas pada rentang dari 0 hingga max. Nilai value menandai posisi saat ini; ketika value sama dengan max, tugas tuntas dan batang penuh terisi. Mekanismenya: browser merender batang isian sesuai rasio value/max, tanpa satupun CSS dari kita. Semantiknya juga ikut terbawa — pembaca layar mengumumkan elemen ini sebagai kemajuan, bukan sekadar gambar.

Atribut max bawaannya 1, sehingga untuk tugas berpersentase kita dapat memakai value="0.7" tanpa menulis max. Untuk hitungan diskret, pasangkan keduanya: langkah 3 dari 5 berarti value="3" dan max="5".

Tiga Varian Pemakaian #

Tiga keadaan yang paling sering kita temui, memakai data operasional Kedai Kopi Siti:

html 
<h2>Pengaturan akun</h2>

<p>Mengunggah foto menu baru…</p>
<progress value="70" max="100"></progress>

<p>Langkah pemesanan 3 dari 5:</p>
<progress value="3" max="5"></progress>

<p>Memproses pesanan antre…</p>
<progress></progress>

Mari kita telaah kode di atas:

  1. Baris 5 (value="70" max="100"): varian determinate — kemajuan unggahan terukur, batang terisi 70 persen; angka persen tetap perlu ditampilkan di teks karena elemen tidak mencetak nilainya.
  2. Baris 8 (value="3" max="5"): varian langkah — kemajuan checkout; rasio 3/5 dirender batang terisi 60 persen.
  3. Baris 11 (<progress> tanpa value): varian indeterminate — value yang tidak ada menandai proses yang belum terukur; browser menampilkan animasi batang yang berjalan terus, sinyal bahwa sistem masih bekerja.
  4. Paragraf pendamping: teks naratif menjelaskan apa yang sedang berjalan — elemen progress sendiri tidak punya label bawaan, jadi konteks selalu diberikan di sekitarnya.

Tampilan batangnya memang berbeda-beda antar browser: satu bersudut kotak, lainnya membulat, warnanya mengikuti tema sistem. Perilaku semantiknya tetap sama, dan konsistensi visual lintas aplikasi di dalam satu browser justru membantu pengguna mengenali indikator.

Lihat ketiga varian itu dirender apa adanya. Perhatikan batang ketiga: tidak memiliki value, sehingga browser menampilkan animasinya yang terus berjalan — sinyal “masih diproses” tanpa angka:

Kapan progress Dipakai #

Tiga pola pemakaian yang tepat:

  • Hasil operasi: unggahan berkas, pengolahan pembayaran, pemrosesan antrean — pengguna menunggu titik selesai.
  • Langkah wizard: checkout bertahap, pengisian form panjang yang dipecah — posisi saat ini dari total langkah.
  • Keadaan tak terukur: proses yang durasinya belum bisa dihitung, memakai varian indeterminate tanpa value.

Ringkasan #

  • progress melaporkan kemajuan tugas pada rentang 0 hingga max lewat atribut value.
  • Tanpa value, elemen menjadi indeterminate — animasi berjalan untuk proses yang belum terukur.
  • Pasangkan selalu teks konteks di sekitarnya; elemen tidak mencetak angka maupun label.
  • Tampilan bawaannya berbeda antar browser, semantiknya tetap sama dan siap dibaca pembaca layar.

Selanjutnya: elemen meter, tetangga progress yang sering tertukar dengannya padahal tujuannya berbeda.