Progress dan Meter

Interaksi yang baik memberi umpan balik berupa angka: berapa kilobyte album yang telah terunggah, seberapa penuh kuota penyimpanan, atau seberapa tinggi skor kuis. HTML menyediakan dua elemen untuk kebutuhan itu, yaitu progress dan meter. Keduanya mirip secara visual karena sama-sama berwujud bar berisi, tetapi keduanya menyampaikan makna yang berbeda dan memakai atribut yang berbeda pula. Chapter ini memisahkan keduanya, lalu merakit contoh yang memperbarui progres lewat JavaScript.

Elemen progress: Indikator Tugas Berjalan #

Elemen progress menyatakan kemajuan sebuah tugas, misalnya unggah, unduhan, atau langkah instalasi. Atribut max menetapkan nilai penuhnya (default 1), atribut value menyatakan posisi sekarang, dan atribut min tidak ada karena nilainya selalu 0. Browser menampilkan porsi value dibagi max sebagai bagian bar yang terisi. Bila atribut value tidak ditulis, bar berstatus indeterminate: bergerak tanpa menyatakan perkiraan lama, tepat untuk tugas yang sedang berjalan tetapi belum terukur.

<!-- Indeterminate: tugas berjalan, lamanya tidak diketahui -->
<progress>Mencari jadwal...</progress>

<!-- Determinate: 120 dari 200 KB -->
<progress max="200" value="120">120 dari 200 KB</progress>

Teks di antara tag pembuka dan tag penutup adalah fallback: tampil pada browser yang tidak mendukung elemen tersebut dan tetap berguna sebagai penjelas singkat. Dukungan browser untuk kedua elemen ini kini merata, sehingga teks itu semata bonus. Tulis saja, karena biayanya nol.

Elemen meter: Pengukuran dalam Rentang Dikenal #

Elemen meter menyatakan pengukuran skalar di dalam rentang yang batasnya diketahui: skor, kuota, atau hasil pengukuran alat. Atribut min dan max menetapkan rentangnya, sedangkan value menyatakan angka yang diukur — atribut ini wajib ada. Tiga atribut tambahan, yaitu low, high, dan optimum, membagi rentang menjadi wilayah: browser memberi warna berbeda sesuai posisi value terhadap optimum. Skor 82 pada rentang 0 sampai 100 dengan optimum="100" misalnya, dirender dalam warna yang menyatakan hasil bagus.

<label for="meter-kuis">Skor kuis pengenalan HTML</label>
<meter id="meter-kuis" min="0" max="100" low="40" high="70" optimum="100" value="82">82 dari 100</meter>

Output yang Dihasilkan:

Bar meter terisi hingga 82 dari 100:
  - Wilayah 0 sampai 40 (di bawah low) berwarna pucat
  - Wilayah 70 ke atas, yang mendekati optimum, berwarna hijau

Memilih antara progress dan meter #

Perbedaan keduanya paling mudah dibaca dari tabel berikut:

Ujiannya sederhana: bila angka menyatakan seberapa jauh sebuah tugas berjalan, pakai progress; bila angka menyatakan hasil pengukuran pada rentang yang batasnya tetap, pakai meter. Nilai meter boleh berubah dari waktu ke waktu, tetapi maknanya tetap pengukuran, bukan kemajuan tugas.

Contoh: Unggah Album dan Hasil Kuis #

Kita gabungkan keduanya pada satu halaman: tombol mengunggah potongan album sedemikian rupa sehingga progress naik, sementara meter menampilkan skor kuis Siti secara statis.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Progress dan Meter</title>
  <style>
    body {
      font-family: sans-serif;
      max-width: 480px;
      margin: 24px auto;
      line-height: 1.7;
    }
    progress, meter {
      width: 100%;
      height: 20px;
    }
    button {
      padding: 8px 14px;
      border-radius: 6px;
      border: 1px solid #6b7280;
      background: #f3f4f6;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Unggah Album dan Hasil Kuis</h1>

  <h2>Unggah album</h2>
  <p id="teks-unggah">0 dari 200 KB</p>
  <progress id="progres-unggah" max="200" value="0">0%</progress>
  <button id="tombol-unggah" type="button">Unggah potongan berikutnya</button>

  <h2>Hasil kuis Siti</h2>
  <label for="meter-kuis">Skor kuis pengenalan HTML</label>
  <meter id="meter-kuis" min="0" max="100" low="40" high="70" optimum="100" value="82">82 dari 100</meter>

  <script>
    const progres = document.querySelector("#progres-unggah");
    const teksUnggah = document.querySelector("#teks-unggah");
    const tombolUnggah = document.querySelector("#tombol-unggah");
    const potongan = 50;

    function unggahPotongan() {
      if (progres.value < progres.max) {
        progres.value = progres.value + potongan;
        teksUnggah.textContent = progres.value + " dari 200 KB";
      }
    }

    tombolUnggah.addEventListener("click", unggahPotongan);
  </script>
</body>
</html>

Output yang Dihasilkan:

Saat halaman baru dibuka:
  - Teks "0 dari 200 KB" berada di atas bar progres
  - Bar progres kosong; bar meter terisi hingga 82 dari 100
Setiap tekan tombol "Unggah potongan berikutnya":
  - Bar progres terisi bertambah 50: 50, 100, 150, lalu 200
  - Teks di atas bar ikut berubah mengikuti nilainya
Setelah mencapai 200 KB:
  - Tekanan tombol berikutnya tidak mengubah apa pun

Mari kita bedah isi halaman itu:

1. <progress id="progres-unggah" max="200" value="0">0%</progress>: bar determinate dengan max 200 dan fallback teks “0%”.
2. <meter ... value="82">82 dari 100</meter>: pengukuran dengan wilayah low, high, dan optimum, serta fallback teks “82 dari 100”.
3. const potongan = 50;: besaran kenaikan nilai progres untuk setiap klik.
4. Function unggahPotongan: cabang if membandingkan progres.value dengan progres.max, lalu menaikkan value dan menulis ulang teks status; properti value dan max keduanya terbaca sebagai angka.
5. addEventListener("click", unggahPotongan): memasang fungsi pada tombol sehingga setiap tekanan menambah satu potongan unggahan.

Kedua elemen ini menutup deretan komponen bawaan yang menyampaikan status pada section ini. Chapter berikutnya merangkum seluruh materi section dari sudut pandang accessibility.

Referensi resmi untuk pendalaman:

• MDN Web Docs — progress
• MDN Web Docs — meter

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Progress dan Meter</title>
  <style>
    body {
      font-family: sans-serif;
      max-width: 480px;
      margin: 24px auto;
      line-height: 1.7;
    }
    progress, meter {
      width: 100%;
      height: 20px;
    }
    button {
      padding: 8px 14px;
      border-radius: 6px;
      border: 1px solid #6b7280;
      background: #f3f4f6;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Unggah Album dan Hasil Kuis</h1>

  <h2>Unggah album</h2>
  <p id="teks-unggah">0 dari 200 KB</p>
  <progress id="progres-unggah" max="200" value="0">0%</progress>
  <button id="tombol-unggah" type="button">Unggah potongan berikutnya</button>

  <h2>Hasil kuis Siti</h2>
  <label for="meter-kuis">Skor kuis pengenalan HTML</label>
  <meter id="meter-kuis" min="0" max="100" low="40" high="70" optimum="100" value="82">82 dari 100</meter>

  <script>
    const progres = document.querySelector("#progres-unggah");
    const teksUnggah = document.querySelector("#teks-unggah");
    const tombolUnggah = document.querySelector("#tombol-unggah");
    const potongan = 50;

    function unggahPotongan() {
      if (progres.value < progres.max) {
        progres.value = progres.value + potongan;
        teksUnggah.textContent = progres.value + " dari 200 KB";
      }
    }

    tombolUnggah.addEventListener("click", unggahPotongan);
  </script>
</body>
</html>