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>
Rate this post
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

LearnPress ve TutorLMS Karşılaştırması

Mükemmel WordPress LMS eklentisini seçmek ciddi bir emek ister. Sitenizi belirlediğiniz eklenti ile kurduktan sonra…

1 gün önce

Teknolojik Gelişmelerin Türkçe’ye Olan Etkisi

Türkçe binlerce yıldır farklı coğrafyalarda yoğurulup, farklı kültürlerle harmanlanıp günümüze kadar geldi ve bugünkü halini…

3 hafta önce

Trambolin Parkı Hediyesi Nereden Alınır?

Kim demiş, kanatsız uçamayız, diye! Trambolin gibi bir gerçek varken üstelik! Evet, bize uçuyor hissi…

1 ay önce

Enerji Zenginliğe Nasıl Dönüştürülür?

Toplumca oluşturulan düzenin dışına çıkarak, sevgi ve tutkuyla eylemler yaptığımız zaman enerjimiz yükselecektir bu yüksek…

2 ay önce

Valorant’ta İsim Nasıl Değiştirilir?

Riot games’in bizler için çıkardığı fps oyunu olan valorant, fps dünyasına çok hızlı bir şekilde…

2 ay önce

Düğün Elbisesi

Günümüz tasarımı yapılan düğün elbisesi modelleri göz alıcı görsellikle desteklenmektedir. Burada düğün elbiselerinin kendi tarzınızı…

2 ay önce