⏳ HTML Progress & Meter

“Yükleniyor… Sabret (Ama Gerçekten Ne Kadar?)”

İnternette üç evrensel gerçek vardır:

1. Wi‑Fi en kritik anda gider.
2. console.log çalışınca kendini dâhi sanırsın.
3. Progress bar %99’da takılır.

İşte bu yazıda HTML’in iki sabır ölçme cihazını masaya yatırıyoruz:

• <progress> → Bir iş yapılıyor, az kaldı… galiba.
• <meter> → Durum bu, psikolojik olarak hazır ol.

Kahveni al ☕ çünkü bu yazı uzun, öğretici, bol örnekli ve biraz da delice.

🔄 1. <progress> Etiketi

“Bir şeyler oluyor ama henüz özgür değilsin”

<progress> etiketi zamana veya aşamalara bağlı ilerleyen işlemler içindir.

Nerelerde kullanılır?

• Dosya yükleme
• Video / resim işleme
• Form gönderimi
• Güncelleme işlemleri

Kısaca:

Bir şey başlar, biter. Arası progress.

📌 Temel Kullanım

<progress value="30" max="100"></progress>

🧠 Burada olan şey şu:

• value → Şu ana kadar yapılan
• max → Toplam yapılacak iş

Tarayıcı diyor ki:

“%30 bitti, panik yapma.”

🎯 Gerçek Hayat Örneği: Dosya Yükleme

<label for="upload">Dosya yükleniyor:</label>
<progress id="upload" value="75" max="100"></progress>

📌 İpucu:

• Label eklemezsen ekran okuyucular üzülür
• Üzülürlerse SEO da üzülür
• Kimse üzülmesin

❓ Belirsiz Progress (İnsan Sinir Eden Versiyon)

<progress></progress>

Bu kullanım şunu söyler:

“Bir şeyler dönüyor ama süre yok.”

🧨 Dikkat:

• Kullanıcıyı uzun süre burada bırakmak güven kaybı yaratır
• Mümkünse yüzde ver, hayat kurtar

🎨 CSS ile Progress’i Karizmatik Yapmak

(Çünkü çirkin bar kimseyi mutlu etmez)

progress {
  width: 100%;
  height: 20px;
}

progress::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 10px;
}

progress::-webkit-progress-value {
  background-color: #4caf50;
  border-radius: 10px;
}

✨ Artık progress bar:

• Daha yuvarlak
• Daha modern
• Daha az sinir bozucu

📏 2. <meter> Etiketi

“Durum tespiti yapan gerçekçi arkadaş”

<meter> bir şeyin anlık seviyesini gösterir.
Zamana bağlı olmak zorunda değildir.

Nerelerde kullanılır?

• Pil seviyesi 🔋
• Disk doluluk 💾
• Puanlama ⭐
• Sağlık, performans, kalite göstergeleri

meter sana umut vermez, gerçeği söyler.

📌 Temel Kullanım

<meter value="6" min="0" max="10"></meter>

🧠 Okunuşu:

• 0 → Dip
• 10 → Efsane
• 6 → “İdare eder”

🚦 Gelişmiş Kullanım: Low, High, Optimum

<meter
  value="3"
  min="0"
  max="10"
  low="4"
  high="8"
  optimum="9">
</meter>

Bu ayarlar ne işe yarar?

• low → Riskli bölge
• high → Güzel ama dikkat
• optimum → İdeal seviye

📊 Tarayıcı bunlara göre renk ve vurgu verir.

☕ Eğlenceli Örnek: Kahve Seviyesi

<label>Kahve Durumu:</label>
<meter value="2" min="0" max="10" low="3" high="7" optimum="9"></meter>

☠️ Bu seviye şunu söylüyor:

“Kod yazma, önce kahve.”

⚔️ Progress vs Meter

“İkiz değiller, kuzen bile sayılmazlar”

🧠 Altın Kural:

• Ne zaman bitecek? → progress
• Durum ne? → meter

♿ Erişilebilirlik (Vicdanlı Developer Bölümü)

<label for="disk">Disk Doluluk:</label>
<meter id="disk" value="80" min="0" max="100"></meter>

✔ Label kullan
✔ Anlamlı değerler ver
✔ Kullanıcıyı tahmin yapmaya zorlama

❌ En Yaygın Hatalar

🚫 Yükleme için meter kullanmak
🚫 Durum göstergesi için progress kullanmak
🚫 value yazmayı unutmak
🚫 %99’da takılı kalmak (travma)

🧠 Mini Özet (Ama Aslında Full Özet)

• <progress> → Süreç anlatır
• <meter> → Durum anlatır
• İkisi de HTML5 nimetidir
• Doğru kullanırsan kullanıcı sana güvenir