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

Bad Boys: Her Zaman Çılgın (2020) Film İncelemesi

Uyuşturucu kartelinin başında bulunan Armando Armas'ın yakalanması gerekmektedir. Ancak Armando soğukkanlı ve ünlü bir katildir.…

1 hafta önce

Terminatör: Kara Kader (2019) Film İncelemesi

Dani Ramos (Natalia Reyes) gelecekten gelen bir terminatör tarafından takip edilmektedir. Bir tarafta sıradan bir…

2 hafta önce

Aylık Araç Kiralamanın Püf Noktaları

Araç kiralama yapmak isteyen kişiler gerekli olan prosedürlerden haberdar olmalıdır. Çünkü her şoför araç kiralayamamaktadır.…

3 hafta önce

Dying Light (2015) Oyun İncelemesi

Dying Light, 2015 yılında Techland tarafından piyasaya sürülmüş birinci şahıs açılı bir zombi oyunudur. Dying…

1 ay önce

3 Maddede Akıllı Ev Kontrolü

Akıllı ev teknolojisi yaklaşık olarak 10 yıldır teknolojinin gündeminde olmasına rağmen, mobil ağının hızlanması ve…

1 ay önce

Google Chrome için Karanlık Mod Nasıl Etkinleştirilir?

Google Chrome, masaüstü ve mobil cihazlar için karanlık bir moda sahiptir. Ancak etkinleştirmek beklediğiniz kadar…

2 ay önce