Bootstrap 5 İlerleme Çubuğu

Temel ilerleme çubuğu

ilerleme çubuğu, kullanıcının bir süreçteki ilerlemesini göstermek için kullanılabilir.

varsayılan ilerleme çubuğu oluşturmak için .progress sınıfını konteyner öğesine ekleyin ve .progress-bar sınıfını alt öğesine ekleyin. İlerleme çubuğunun genişliğini CSS width özniteliği ile ayarlayın:

Örnek

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

Kişisel olarak deneyin

İlerleme çubuğu yüksekliği

ilerleme çubuğunun yüksekliği varsayılan olarak 1rem（genellikle 16px）。CSS kullanarak lütfen: height öznitelik kullanarak değiştirin.

İpucu:Lütfen, ilerleme konteyneri ve ilerleme çubuğuna aynı yüksekliği ayarlayın:

Örnek

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

Kişisel olarak deneyin

İlerleme çubuğu etiketleri

Görünür yüzdesi göstermek için ilerleme çubuğuna metin ekleyin:

Örnek

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

Kişisel olarak deneyin

Renkli ilerleme çubuğu

Varsayılan olarak, ilerleme çubuğu mavi (ana) renkte olacaktır. Renk değiştirmek için herhangi bir bağlam arka plan sınıfını kullanın:

Örnek

<!-- Mavi -->
<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>
<!-- Yeşil -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>
<!-- Turkuaz -->
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Turuncu -->
<div class="progress">
   <div class="progress-bar bg-warning" style="width:40%"></div>
</div>
<!-- Kırmızı -->
<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>
<!-- Beyaz -->
<div class="progress border">
  <div class="progress-bar bg-white" style="width:60%"></div>
</div>
<!-- Gri -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<!-- Hafif Gri -->
<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>
<!-- Koyu Gri -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>

Kişisel olarak deneyin

Desenli ilerleme çubuğu

Kullanın .progress-bar-striped İlerleme çubuğuna desen eklemek için sınıf kullanın:

Örnek

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

Kişisel olarak deneyin

İlerleme çubuğu animasyonu

Ekleyin .progress-bar-animated İlerleme çubuğu animasyonu oluşturmak için sınıf kullanın:

Örnek

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

Kişisel olarak deneyin

Çok sayıda ilerleme çubuğu

İlerleme çubuğu da katlanabilir:

Örnek

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    Boş Alan
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    Warning
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    Danger
  </div>
</div>

Kişisel olarak deneyin