1356

Komple Uygulamalı Web Geliştirme Eğitimi

Boostrap Progress Bars

Boostrap progress bar (ilerleme çubuğu) nasıl yapılır?

Boostrap Progress Bar, bir işlemin tamamlanmasına ne kadar kaldığını görsel olarak bildirmek için kullanılan ve içi dolan bir ilerleme çubuğunu temsil eder. Örneğin %70 aşamasında olduğumuzu temsil eden bir çubuk.

 

 

Bootstrap progress bar oluşturmak için .progress sınıfına sahip bir <div> etiketi içine ekleyeceğiniz bir başka <div> etiketine .progress-bar sınıfını ekleyerek elde edebiliriz. Progress bar' ın width özelliğine vereceğiniz yüzde oranı ise ilerleme çubuğunun yüzde kaçında olduğumuzu temsil eder.

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

Örnek 1 için tıklayınız.

Progress barın başlangıç olarak yüksekliği 16px' dir. Eğer farklı bir yükseklik değeri atamak isterseniz height özelliğini kullanabilirsiniz.

 

 

 

<div class="progress" style="height:30px">
  <div class="progress-bar" style="width:70%;height:30px"></div>
</div>

Örnek 2 için tıklayınız.

Progress bar üzerine ilerlemeyi belirtecek olan bir yazı ekleyebilirsiniz.

70%

 

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

Örnek 3 için tıklayınız.

Progress barın rengi başlangıç ayarı olarak mavi (primary) renktedir. Bu rengi değiştirmek için bg-* sınıflarını kullanabilirsiniz.

 


 


 


 


 


 


 


 


 

 

Örnek 4 için tıklayınız.

 

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

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

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

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

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

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

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

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

<!-- Dark Grey -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>

 

 

Striped Progress Bars

.progress-bar-striped sınıfı ile çizgili progress bar oluşturabiliriz.

 

 

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>

 

Örnek 5 için tıklayınız.

Animated Progress Bar

.progress-bar-animated sınıfını ekleyerek hareketli progress bar oluşturabiliriz.

40%

 

 

<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%">
   40%
</div>

 

 

Örnek 6 için tıklayınız.

Multiple Progress Bars

Farklı tipteki progress barları aynı yerde kullanabiliriz.

 

Free Space
Warning
Danger
 
 

 

 

<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>

 

 

Örnek 7 için tıklayınız.