in English

İlerlemek

Yığılmış çubuklar, hareketli arka planlar ve metin etiketleri için destek içeren Bootstrap özel ilerleme çubuklarını kullanmaya ilişkin belgeler ve örnekler.

Bu sayfada

Nasıl çalışır

İlerleme bileşenleri iki HTML öğesi, genişliği ayarlamak için bir miktar CSS ve birkaç nitelik ile oluşturulmuştur. İlerleme çubuklarını yığabilmenizi, canlandırabilmenizi ve üzerlerine metin etiketleri yerleştirebilmenizi sağlamak için HTML5 <progress>öğesini kullanmıyoruz .

.progressİlerleme çubuğunun maksimum değerini belirtmek için sarmalayıcı olarak kullanırız .
.progress-barŞimdiye kadarki ilerlemeyi belirtmek için iç kısmı kullanıyoruz .
.progress-barGenişliklerini ayarlamak için bir satır içi stil, yardımcı program sınıfı veya özel CSS gerektirir .
Ayrıca , erişilebilir kılmak için .progress-barbazı roleve nitelikler gerektirir.aria

Hepsini bir araya getirin ve aşağıdaki örneklere sahipsiniz.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Bootstrap, genişliği ayarlamak için bir avuç yardımcı program sağlar . İhtiyaçlarınıza bağlı olarak bunlar, ilerlemeyi hızlı bir şekilde yapılandırmanıza yardımcı olabilir.

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Etiketler

içine metin yerleştirerek ilerleme çubuklarınıza etiketler ekleyin .progress-bar.

%25

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Yükseklik

Biz sadece heightüzerinde bir değer belirledik .progress, bu yüzden bu değeri değiştirirseniz iç kısım .progress-barotomatik olarak buna göre yeniden boyutlandırılacaktır.

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Arka plan

Tek tek ilerleme çubuklarının görünümünü değiştirmek için arka plan yardımcı program sınıflarını kullanın.

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Çoklu çubuklar

Gerekirse, bir ilerleme bileşenine birden çok ilerleme çubuğu ekleyin.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Çizgili

İlerleme çubuğunun arka plan rengi üzerine CSS gradyanı aracılığıyla bir şerit uygulamak .progress-bar-stripediçin herhangi birine ekleyin ..progress-bar

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

animasyonlu çizgiler

Çizgili degrade de canlandırılabilir. CSS3 animasyonları ile sağdan sola şeritleri canlandırmak için .progress-bar-animatedekleyin ..progress-bar

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

küstah

Değişkenler

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       $gray-200;
$progress-border-radius:            $border-radius;
$progress-box-shadow:               $box-shadow-inset;
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

Anahtar kareler

için CSS animasyonları oluşturmak için kullanılır .progress-bar-animated. Dahil scss/_progress-bar.scss.

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}