0Pricing
HTML Academy · Pelajaran

Elemen progress dan meter

Tampilkan nilai penyelesaian dan pengukuran dengan HTML bawaan.

Elemen progress dan meter adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Elemen Kemajuan

Elemen <progress> merepresentasikan penyelesaian tugas:

<label for="upload">File upload progress:</label>
<progress id="upload" max="100" value="72">72%</progress>
<!-- max: total amount of work (default: 1) -->
<!-- value: amount of work done -->
<!-- Content between tags: fallback for old browsers -->

Kemajuan Tidak Tentu

Tanpa value, kemajuan menampilkan animasi yang tidak tentu:

<!-- Indeterminate: value not set -->
<progress id="loading">Loading...</progress>
<!-- Browser shows a cycling animation (no value known) -->

<!-- Set value when progress is known: -->
<script>
document.getElementById('loading').value = 45;
// Now shows 45% complete (with max=1: 0.45 = 45%)
</script>

Menganimasikan Kemajuan dengan JavaScript

Perbarui kemajuan secara dinamis:

<progress id="task" max="100" value="0"></progress>
<span id="pct">0%</span>

<script>
let progress = 0;
const bar = document.getElementById('task');
const pct = document.getElementById('pct');

const interval = setInterval(() => {
  progress += 10;
  bar.value = progress;
  pct.textContent = progress + '%';
  if (progress >= 100) clearInterval(interval);
}, 500);
</script>

Elemen Pengukur

Elemen <meter> menampilkan pengukuran skalar dalam rentang yang diketahui:

<meter min="0" max="100" value="72">72 out of 100</meter>
<!-- Unlike progress (task completion), meter shows a static measurement:
  - Disk usage
  - Password strength
  - Score or rating
  - Fuel level
-->

Atribut Elemen Pengukur

Elemen pengukur memiliki beberapa atribut untuk menentukan rentang optimal dan peringatan:

<meter
  min="0"      <!-- minimum possible value -->
  max="100"   <!-- maximum possible value -->
  low="30"    <!-- threshold: below this = low -->
  high="70"   <!-- threshold: above this = high -->
  optimum="50" <!-- where the optimal value lies -->
  value="85"
>85/100</meter>

Status Warna Pengukur

Peramban memberi warna pada pengukur berdasarkan nilai rendah/tinggi/optimal:

<!-- optimum is in the low range: low values are good (e.g., error count) -->
<meter min="0" max="100" low="30" high="70" optimum="0" value="10">
  10 errors  <!-- green: value is in the good zone -->
</meter>

<!-- optimum is in the high range: high values are good (e.g., score) -->
<meter min="0" max="100" low="40" high="80" optimum="100" value="55">
  55 points  <!-- yellow: between low and high -->
</meter>

Penggunaan Penyimpanan dengan Pengukur

Kasus penggunaan pengukur klasik: penggunaan disk atau memori:

<label for="disk">Disk usage:</label>
<meter
  id="disk"
  min="0"
  max="500"
  low="400"
  high="450"
  optimum="0"
  value="420"
>420 GB of 500 GB used</meter>
<p>420 GB of 500 GB used (84%)</p>

Kekuatan strength dengan Pengukur

Gunakan pengukur untuk menampilkan strength kata sandi:

<label for="pwd">Password</label>
<input type="password" id="pwd">
<label for="strength">Strength:</label>
<meter id="strength" min="0" max="4" low="1" high="3" optimum="4" value="0"></meter>

<script>
document.getElementById('pwd').addEventListener('input', function() {
  const strength = calculateStrength(this.value); // 0-4
  document.getElementById('strength').value = strength;
});
</script>

Memberi Gaya pada Kemajuan dan Pengukur

Pemberian gaya khusus untuk kemajuan dan pengukur:

/* Basic progress styling */
progress {
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
  border: none;
}

progress::-webkit-progress-bar { background: #e2e8f0; }
progress::-webkit-progress-value { background: #0070f3; }
progress::-moz-progress-bar { background: #0070f3; }

Aksesibilitas Kemajuan

Tambahkan atribut ARIA untuk dukungan pembaca layar yang lebih baik:

<label for="upload">Upload progress</label>
<progress
  id="upload"
  max="100"
  value="65"
  aria-valuenow="65"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="File upload: 65% complete"
>65%</progress>

Ringkasan Kemajuan vs Pengukur

Perbedaan utama:

  • <progress> — penyelesaian tugas seiring waktu; nilai meningkat menuju nilai maksimum; dapat bersifat tidak tentu
  • <meter> — pengukuran skalar statis; nilainya sudah diketahui; memiliki zona rendah/tinggi/optimal

Kapan Menggunakan Masing-Masing

Panduan kasus penggunaan:

  • kemajuan — pengunggahan berkas, panduan penyelesaian formulir, bar pemuatan
  • pengukur — penggunaan disk, pengukur bahan bakar, skor kredit, tingkat baterai, relevansi hasil pencarian

Pemeriksaan Singkat

Elemen apa yang tepat untuk menunjukkan seberapa penuh penyimpanan pada cakram keras?

Rekap: Kemajuan dan Pengukur

Hal-hal penting tentang kemajuan dan pengukur:

  • <progress max value> — penyelesaian tugas; tidak tentu tanpa nilai
  • <meter min max low high optimum value> — pengukuran statis
  • Peramban memberi warna otomatis pada pengukur berdasarkan posisi optimal
  • Tambahkan aria-valuenow/min/max untuk dukungan pembaca layar

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Elemen progress dan meter” gratis?

Ya — teks lengkap “Elemen progress dan meter” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Elemen progress dan meter”?

Tampilkan nilai penyelesaian dan pengukuran dengan HTML bawaan. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Elemen progress dan meter” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. aside untuk Konten Pelengkap
  2. figure dan figcaption Ditinjau Kembali
  3. details dan summary untuk Widget Pengungkapan
  4. Elemen progress dan meter
← Kembali ke HTML Academy