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.
Ö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>
çok teşekkürler furkan yine harikalar yaratıyorsun ve buna css de eklenebiliyormuş
progress { width:500px; }
Tablodaki ilk iki değerden sonrakiler css değeri demek ki. Ben onları da html içinde denemiştim 🙂
Güzel bir şeye benziyor 🙂