Progress bar (ilerleme çubuğu) genellikle bir süreci veya devam eden bir durumu grafik üzerinde göstermek için kullanılır. Bu güzel HTML5 nimetinden faydalanmak için aşağıdaki kodu kullanmalısınız.

HTML5 Progress Bar (İlerleme Çubuğu) Kodu

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

Özellikler

Kod içindeki ifadeler ne anlama geliyor? Aşağıdaki tablodan her ifadenin ne işe yaradığını öğrenebilirsiniz.

HTML5 Progress Bar (İlerleme Çubuğu) Özellikleri

Öznitelikler	Ne İşe Yarar?
value	Değere atanan numara yapılan görevin yüzdesini belirtir.
max	Bu değer çubuğun en fazla nereye kadar ilerleyebileceğini belirtir.
width	Çubuğun genişliğini belirtir. İlerleme yüzdesi ve maksimum değer de bu değere oranla genişler.
height	Çubuğun yüksekliği.
vertical-align	İlerleme çubuğunu diğer nesnelere göre hizalamak için kullanılır.
background-color	Varsayılan gri rengi değiştirmek için kullanılır.
display	Varsayılan değer inline-block belirlenmiştir.
Uyumlu olduğu tarayıcılar

Kullanım Senaryoları

%55 dolu olan.

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

İleri geri giden.

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

0.8’den 0.6’sı dolu olan

<progress max="0.8" value="0.6"></progress>