HTML5 Progress Bar (İlerleme Çubuğu)

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   

Önizleme

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


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


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


<label>%20 tamamlandı</label> <progress value="55" max="100"></progress>

Bunlar da hoşunuza gidebilir...

Görüşleriniz benim için değerlidir.

3 Cevaplar

  1. Müjdat Sayar dedi ki:

    çok teşekkürler furkan yine harikalar yaratıyorsun ve buna css de eklenebiliyormuş

    progress { width:500px; }

  2. Oğuzhan Aktepe dedi ki:

    Güzel bir şeye benziyor 🙂

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Loading Facebook Comments ...
Loading Disqus Comments ...