Kategoriler: Webmaster

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

 

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>
Furkan Özden

Blog dünyası ile 2009 yılında tanıştım. Bloğumda haftada en az bir yazı yayımlıyorum. Yazdığım yazıları beğendiyseniz beni Twitter'dan (@frknzdn) takip edebilirsiniz. Daha fazlası için hakkımda sayfasını ziyaret edin.

Paylaş
Yazar
Furkan Özden

Son Gönderiler

Outside the Wire (2021) Film İncelemesi

Gelecekte geçen bir filmden daha Merhaba! Yıl 2036. İki deniz piyadesinin ölümünden sonra emre itaatsizlikle…

4 gün önce

DPI ve CPI Farkı Ne Anlama Geliyor

Satın almak için yeni bir fare arıyorsanız DPI terimiyle karşılaşmış olabilirsiniz. DPI, özellikle oyun oynamak için…

2 hafta önce

2020 Özeti – Yıla Bakış

Uzun zamandır bloğa kişisel yazı girmiyordum. Önce Sezer abinin bloğundan ardından Tahsin Bey'in bloğundan gelen…

3 hafta önce

Resim Paleti ile Boyaların Benzersizliği

Her insan için, en eğlenceli ve dinlendirici aktivitelerden bir tanesi de resim yapmaktır. Ruhu dinlendiren…

4 hafta önce

Steam Puan Dükkanı Rehberi

Steam Puan Dükkanı, Steam'in yakın zamanda duyurduğu yeni bir özellik. Steam Puan Dükkanı sayesinde profilinizi…

1 ay önce

İncia Kişisel Bakım Ürünleri

Kişisel bakım hayatlarımızın olmazsa asla dışarı bile çıkamayacağımız bir durum haline gelmiştir. Kişisel bakımlarımız ile…

1 ay önce