HTML progress: Menampilkan Kemajuan dan Status Tidak Tentu

HTML <progress> menunjukkan bagian tugas yang telah selesai. Tetapkan value dan max untuk kemajuan dengan jumlah yang diketahui, atau hilangkan atribut value jika total pekerjaan tidak diketahui. Elemen ini tidak mengukur unggahan atau unduhan secara otomatis.

Hitung kemajuan dengan value dan max

nilai adalah jumlah yang telah diselesaikan dan max adalah jumlah total. Nilai 20 dengan max 100 berarti 20%; dengan max 200 berarti 10%. Ketika max dihilangkan, default-nya adalah 1, jadi 20% ditulis sebagai value="0.2". Gunakan angka yang valid lebih besar dari nol untuk max dan nilai antara nol dan max.

Minimum selalu nol; progress tidak menggunakan atribut min. Pertimbangkan meter untuk pengukuran dalam suatu rentang, seperti penggunaan penyimpanan atau skor. Gunakan progress untuk penyelesaian tugas yang sedang berjalan.

Contoh lengkap: perbarui progress dan alihkan ke tidak tentu (indeterminate)

Simpan kode ini sebagai progress-demo.html dan buka di browser. Tombol-tombol hanya mengubah nilai yang ditampilkan untuk latihan; mereka tidak mentransfer file.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kemajuan dan status tidak tentu</title>
  <style>
    body { max-width: 36rem; padding: 0 1rem; margin: 1rem auto; }
    progress { display: block; width: 100%; height: 1.5rem; }
    button { margin: 0.25rem; font: inherit; }
  </style>
</head>
<body>
  <h1>Latihan kemajuan</h1>
  <label for="work">Kemajuan tugas contoh</label>
  <progress id="work" value="20" max="100">20%</progress>
  <p id="status" aria-live="polite">20% selesai</p>
  <button type="button" id="advance">Ubah ke 80%</button>
  <button type="button" id="unknown">Total tidak diketahui</button>
  <button type="button" id="reset">Atur ulang</button>
  <script>
    const bar = document.getElementById('work');
    const status = document.getElementById('status');
    function show(value) {
      if (value === null) {
        bar.removeAttribute('value');
        bar.textContent = 'Sedang berlangsung';
        status.textContent = 'Sedang berlangsung: jumlah total pekerjaan tidak diketahui.';
      } else {
        bar.value = value;
        bar.textContent = value + '%';
        status.textContent = value + '% selesai';
      }
    }
    document.getElementById('advance').addEventListener('click', () => show(80));
    document.getElementById('unknown').addEventListener('click', () => show(null));
    document.getElementById('reset').addEventListener('click', () => show(20));
  </script>
</body>
</html>

1. Status awal adalah 20% selesai. Klik Ubah ke 80% untuk mengubah baik bilah maupun deskripsinya menjadi 80%.
2. Klik Total tidak diketahui untuk menghapus atribut nilai. Peramban akan menampilkan progres tidak tentu beserta kalimat yang menjelaskan bahwa totalnya tidak diketahui.
3. Klik Atur ulang untuk mengembalikan atribut nilai dan kembali ke 20%.

value="0" adalah progres tertentu dengan tidak ada pekerjaan yang selesai; ini bukan progres tidak tentu. Untuk mengubah elemen progres yang ada menjadi tidak tentu, hapus atribut seperti yang dilakukan pada contoh. Penampilan dan animasi progres tidak tentu bisa berbeda-beda tergantung peramban, sistem operasi, dan pengaturan pengguna.

Berikan nama tugas dan kalimat status

Teks “20%” di dalam progress adalah teks cadangan untuk browser lama, bukan pengganti nama tugas. Hubungkan label menggunakan nilai for dan id yang sesuai, atau berikan nama yang dapat diakses ARIA yang tepat, untuk mengidentifikasi tugas. Tampilkan keadaan saat ini baik dalam kata-kata maupun melalui warna dan panjang batang.

Untuk tugas nyata, perbarui nilai dari informasi yang disediakan oleh server atau peristiwa transfer. Mengisi batang dengan timer tidak menandakan bahwa pekerjaan telah selesai. Rancang pesan dan tindakan terpisah untuk kesalahan, pembatalan, dan penyelesaian, serta kendalikan frekuensi pengumuman sehingga pembaruan status tidak terulang secara berlebihan. Referensi MDN progress menjelaskan sintaks dan persyaratan aksesibilitas.