Bootstrap 4 İlerleme Çubuğu(Progress Bar)

Bootstrap4 İlerleme Çubuğu (Progress)

Bootstrap4'te ilerleme çubuğu(progress bar) oluşturmak için genellikle içi içe 2 div elemanı kullanılır. Bu elemanlardan dışta bulunan eleman progress class özelliğini alır.İçte bulunan div ise progress-bar class değerini alır. Bu işlemlerden sonra içte bulunan elemanın style parametresine yüzde(%) cinsinden genişlik yazılarak ilerleme çubuğu oluşturulur.
Örnek: <div class="progress my-3"> <div class="progress-bar" role="progressbar" style="width: 50%"></div> </div> Oluşturduğumuz nesnenin arama motorları ve tarayıcılar tarafından daha erişilebilir olması için bazı HTML5 parametreleri kullanılabilir.(Bu parametreler progress bar'ımızın çalışmasını engellemez sadece daha erişilebilir olmasını sağlar ve kullanımı isteğe bağlıdır)
Bunlar; role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"

İlerme Çubuğu üstüne yazı ekleme

(progress-bar) özelliğine sahip(içte bulunan) div'in içine yazı yazılarak ilerleme çubuğu üzerinde görünmesi sağlanır.

İlerleme Çubuğu Yüksekliği

progress özelliğine sahip(dışta bulunan) div'e height stil özelliği verilerek progress bar'ımızın daha yüksekliğini ayarlayabiliriz.

İlerleme Çubuğu Rengi

(progress-bar) özelliğine sahip(içte bulunan) div'in class değerine bg-* değeri de eklenerek ilerleme çubuğunun rengi hazır bootstrap renklerine dönüştürülebilir.
Not:* işaretli bölmüe hazır renk isimleri gelecektir.

Şerit Desenli İlerleme Çubuğu

(progress-bar) özelliğine sahip(içte bulunan) div'in class değerine progress-bar-striped değeri de eklenerek ilerleme çubuğumuzu şerit desenli bir görünüme kavuşturabiliriz .
Ayrıca progress-bar-animated değeri de eklenerek şerit desenli ilerleme çubuğumuz hareketli bir görünüm kazanabilir.
Not: Şeritli görünüm olmadan animasyon olayı çalışmaz.


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

Son Yorumlar

İletişim

  • info@frontendokulu.com