Boostrap Progress Bars

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.

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

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

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