0Pricing
HTML Academy · Ders

progress ve meter Öğeleri

Tamamlanma ve ölçüm değerlerini yerel HTML ile gösterin

progress ve meter Öğeleri, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

İlerleme Öğesi

<progress> öğesi bir görevin tamamlanma durumunu temsil eder:

<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 -->

Belirsiz İlerleme

value olmadan ilerleme, belirsiz bir animasyon gösterir:

<!-- 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>

JavaScript ile İlerlemeyi Canlandırma

İlerlemeyi dinamik olarak güncelleyin:

<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>

Ölçüm Öğesi

<meter> öğesi, bilinen bir aralık içindeki skaler measurement değerini görüntüler:

<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
-->

Ölçüm Öznitelikleri

Ölçüm öğesi, en uygun ve uyarı aralıklarını tanımlamak için çeşitli özniteliklere sahiptir:

<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>

Ölçüm Renk Durumları

Tarayıcılar, düşük/yüksek/optimum değerlerine göre ölçüm öğesini renklendirir:

<!-- 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>

Ölçüm ile Disk Kullanımı

Ölçüm öğesinin klasik kullanım alanı disk veya bellek kullanımıdır:

<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>

Ölçüm ile Parola strength Değeri

Parola strength değerini göstermek için ölçüm öğesini kullanın:

<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>

İlerleme ve Ölçümü Biçimlendirme

İlerleme ve ölçüm için özel biçimlendirme:

/* 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; }

İlerlemenin Erişilebilirliği

Daha iyi ekran okuyucu desteği için ARIA öznitelikleri ekleyin:

<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>

İlerleme ve Ölçüm Özeti

Temel ayrım:

  • <progress> — zaman içindeki görev tamamlanması; değer max değerine doğru artar; belirsiz olabilir
  • <meter> — statik skaler measurement; değer önceden bilinir; düşük/yüksek/optimum bölgeleri vardır

Her Birini Ne Zaman Kullanmalı

Kullanım alanı rehberi:

  • ilerleme — dosya yükleme, form tamamlama sihirbazı, yükleme bar
  • ölçüm — disk kullanımı, yakıt göstergesi, kredi puanı, pil düzeyi, arama sonucu uygunluğu

Hızlı Kontrol

Bir sabit diskin ne kadar dolu olduğunu göstermek için hangi öğe uygundur?

Özet: ilerleme ve ölçüm

İlerleme ve ölçümün temel özellikleri:

  • <progress max value> — görev tamamlanması; value olmadan belirsizdir
  • <meter min max low high optimum value> — statik measurement
  • Tarayıcı, optimum konuma göre ölçüm öğesinin renklerini otomatik olarak belirler
  • Ekran okuyucu desteği için aria-valuenow/min/max ekleyin

Sıkça Sorulan Sorular

“progress ve meter Öğeleri” dersi ücretsiz mi?

Evet — “progress ve meter Öğeleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“progress ve meter Öğeleri” dersinde ne öğreneceğim?

Tamamlanma ve ölçüm değerlerini yerel HTML ile gösterin HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“progress ve meter Öğeleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. aside: Tamamlayıcı İçerik
  2. figure ve figcaption'a Yeniden Bakış
  3. details ve summary: Açılır İçerik Bileşeni
  4. progress ve meter Öğeleri
← HTML Academy Sayfasına Dön