Bu yazımızda Bootstrap progress bar nedir, ne işe yarar, nasıl kullanılır gibi konuları öğreneceğiz. Progress bar yani ilerleme çubuklarını hepimiz görmüşüzdür. Örneğin bilgisayarımızda bir dosyayı kopyalarken, taşırken veya silerken işlemin toplamda ne kadar sürede tamamlanacağı veya ne kadar süre kaldığını gösteren ilerleme çubukları vardır. İşte bunlara progress bar diyoruz. Sadece Html ve Css kullanarak da progress bar yapabiliyoruz ama bu yazımızda Bootstrap class’larını kullanarak nasıl yapabileceğimize bakacağız.
⇒ Bootstrap progress bar oluşturmak için yapmamız gerekenler:
- İç içe 2 tane <div> oluşturuyoruz.
- Dıştaki div’in class’ına progress, içteki div’in class’ına progress-bar yazıyoruz.
- Son olarak içteki div’in style attribute içerisinde css kodu yazıyoruz. Burda width özelliğine vereceğimiz değer, progress bar’ın dolum oranını belirliyor. Örneğin width özelliğine 80% değerini verirsek, progress bar’ın 80%‘i dolu görünecektir.
⇒ Bootstrap class’larını kullanarak en basit haliyle progress bar şu şekilde yapılır.
|
1 2 3 4 5 |
<div class="progress"> <div class="progress-bar" style="width:40%"></div> </div> |
Görünümü
Gördüğünüz gibi içteki div’in css özelliklerinden width özelliğine 40% değerini verdiğimiz için, progress bar’ın 40%’ı dolu görünüyor.
⇒ Progress bar’ın yüzde kaçının dolu olduğunu metin olarak da göstermek isterseniz, içteki div’in içerisine metin olarak yazabilirsiniz.
Örneğin;
|
1 2 3 4 5 |
<div class="progress"> <div class="progress-bar" style="width:80%">80%</div> </div> |
Görünümü
⇒ Progress bar’ın varsayılan yükseklik değeri 16px‘dir. Eğer yüksekliğini arttırmak veya azaltmak isterseniz, içteki ve dıştaki div’in css özelliklerinden height özelliğine aynı yükseklik değerini vermelisiniz.
Örneğin 30px yüksekliğinde progress bar oluşturmak için şu şekilde yazmalısınız.
|
1 2 3 4 5 |
<div class="progress" style="height:30px"> <div class="progress-bar" style="width:40%;height:30px"></div> </div> |
⇒ Bootstrap ile oluşturulan progress bar’ın varsayılan rengi mavi’dir. Renk class’larını kullanarak farklı renklerde progress bar oluşturabiliriz.
Bootstrap progress bar renk class’ları şunlardır:
- bg-success
- bg-info
- bg-warning
- bg-danger
- bg-white
- bg-secondary
- bg-light
- bg-dark
Bu renk class’ları ile progress bar oluşturalım ve uygulamalı olarak görelim. Kodlarımız şu şekilde;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!-- Blue --> <div class="progress"> <div class="progress-bar" style="width:10%"></div> </div><br> <!-- Green --> <div class="progress"> <div class="progress-bar bg-success" style="width:20%"></div> </div><br> <!-- Turquoise --> <div class="progress"> <div class="progress-bar bg-info" style="width:30%"></div> </div><br> <!-- Orange --> <div class="progress"> <div class="progress-bar bg-warning" style="width:40%"></div> </div><br> <!-- Red --> <div class="progress"> <div class="progress-bar bg-danger" style="width:50%"></div> </div><br> <!-- White --> <div class="progress border"> <div class="progress-bar bg-white" style="width:60%"></div> </div><br> <!-- Grey --> <div class="progress"> <div class="progress-bar bg-secondary" style="width:70%"></div> </div><br> <!-- Light Grey --> <div class="progress border"> <div class="progress-bar bg-light" style="width:80%"></div> </div><br> <!-- Dark Grey --> <div class="progress"> <div class="progress-bar bg-dark" style="width:90%"></div> </div> |
Görünümü
⇒ Progress bar’ın arkaplan renginin çizgili bir şekilde oluşmasını istiyorsanız, içteki div’in class’ına progress-bar-striped yazmalısınız.
|
1 2 3 4 5 |
<div class="progress"> <div class="progress-bar progress-bar-striped" style="width:40%"></div> </div> |
Görünümü
⇒ Progress bar’ın animasyonlu bir şekilde oluşmasını istiyorsanız, içteki div’in class’ına progress-bar-striped ve progress-bar-animated class’larını yazmalısınız.
|
1 2 3 4 5 |
<div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div> </div> |
Görünümü
⇒ Birden fazla progress bar’ı aynı div içerisinde kullanabiliriz. Örneğin;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="progress"> <div class="progress-bar bg-success" style="width:40%"> Free Space </div> <div class="progress-bar bg-warning" style="width:10%"> Warning </div> <div class="progress-bar bg-danger" style="width:20%"> Danger </div> </div> |
Görünümü
Umarım sizin için faydalı bir yazı olmuştur.
Farklı bir yazımda görüşmek üzere.
){kind=link}
Merhabalar,
Merak ettiğim konu şu width kısmı 100 üzerinden hesap yapıyoruz peki 10 üzerinden bir puanlama yaparsak, yani 5 puanı olursa yüzde 50 lilk kısmı dolması
Merhaba Kubilay,
Sorunu biraz daha açıklayarak sorabilir misin? Anladığım kadarıyla 10 üzerinden puanlama yapıp 5 puan vermek istiyorsun. O zaman width özelliğine %50 değeri vermelisin. Burada 100, 10 veya başka bir değer olması önemli değil. Önemli olan yüzdelik oranı.