BOOTSTRAP 4 – PROGRESS BAR (İLERLEME ÇUBUKLARI)

Fauda · 3 Tem 2021

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

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

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

⇒ 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

<div class="progress">
<div class="progress-bar" style="width:10%"></div>
</div><br>


<div class="progress">
<div class="progress-bar bg-success" style="width:20%"></div>
</div><br>


<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div><br>


<div class="progress">
<div class="progress-bar bg-warning" style="width:40%"></div>
</div><br>


<div class="progress">
<div class="progress-bar bg-danger" style="width:50%"></div>
</div><br>


<div class="progress border">
<div class="progress-bar bg-white" style="width:60%"></div>
</div><br>


<div class="progress">
<div class="progress-bar bg-secondary" style="width:70%"></div>
</div><br>


<div class="progress border">
<div class="progress-bar bg-light" style="width:80%"></div>
</div><br>


<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

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

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.