Progress ve meter

<progress> ve <meter> etiketlerinin farkını öğrenirsin.

Progress ile ilerleme çubuğu

Bir görevin ne kadar ilerlediğini göstermek için <progress> etiketini kullanırsın: dosya yükleme, anket adımları, kurulum çubuğu. value özniteliği mevcut durumu, max özniteliği toplam hedefi ifade eder.

value verilmezse tarayıcı çubuğu belirsiz olarak çizer: animasyonlu, ne kadar bittiği bilinmeyen bir durum için. Bu, görev süresi tahmin edilemeyen durumlar için uygundur.

Meter ile ölçü değeri

Bilinen bir aralıktaki ölçüyü göstermek için <meter> etiketini kullanırsın: disk doluluk oranı, puan, pil seviyesi. value mevcut ölçüdür; min ve max aralığı belirler.

low, high ve optimum ile renk bölgelerini işaret edebilirsin. Örneğin düşük diskte kırmızı, yeterli seviyede yeşil görünmesi gibi. Progress görev içindir, meter ise ölçü.

Uygulama İlerleme ve ölçü etiketlerini yaz

Body içine bir <progress> etiketi ekle; value özniteliği 40 ve max özniteliği 100 olsun. Altına bir <meter> etiketi ekle; value özniteliği 7 ve max özniteliği 10 olsun. İkisini de kapanış etiketiyle yaz.

Örnek çözümü göster

<body>
  <progress value="40" max="100"></progress>
  <meter value="7" max="10"></meter>
</body>

Kendini test et

Hangisi doğrudur?
- progress bir görevin tamamlanma durumunu gösterir
- meter yalnızca yüzde değeri gösterebilir
- progress min özniteliği alır
- meter value özniteliği kullanmaz
Cevabı göster

progress bir görevin tamamlanma durumunu gösterir — Doğru. progress, görev tamamlanmasını çubuk olarak gösterir.

Açılış etiketini tamamla

<____ value="70" max="100"></progress>

Cevabı göster

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

Etiketi ve özniteliği rolüyle eşleştir

progress

Görev tamamlanma
meter

Bilinen ölçüm
value

Mevcut durum
max

Üst sınır

Sıradaki ders: Input öznitelikleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler