Bootstrap 5 Progress Bar: İlerleme Çubuğu, Etiket, Renk ve Çizgili Görünüm

Nasıl çalışır: neden yerel progress öğesi değil?

HTML'nin kendi <progress> öğesi tek bir değeri gösterir ve tarayıcıya göre farklı çizilir. Bootstrap belgeleri bu öğeyi bilerek kullanmadığını söyler: iki <div> ile kurulan yapı sayesinde birden fazla çubuğu aynı kap içinde üst üste yığabilir, çubuğu canlandırabilir ve üzerine metin etiketi yerleştirebilirsiniz. Belgelerin özetlediği dört kural şunlardır:

• .progress sarmalayıcıdır ve çubuğun en büyük değerini temsil eder.
• İçteki .progress-bar o ana kadarki ilerlemeyi gösterir.
• .progress-bar genişliğini satır içi stil, yardımcı sınıf ya da özel CSS ile alır; Bootstrap genişliği kendisi hesaplamaz.
• .progress-bar erişilebilir olması için role ve aria öznitelikleri ister.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 0%" 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: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Derlenmiş CSS ne yapıyor?

Bootstrap 5.0.2 derlenmiş CSS dosyasında iki temel sınıf şöyle tanımlıdır:

.progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #0d6efd;
  transition: width 0.6s ease;
}

Bu iki kuraldan bileşenin bütün davranışını okuyabilirsiniz. Dış kap bir flex kapsayıcıdır; içindeki çubuklar soldan sağa yan yana dizilir, bu yüzden birden fazla çubuk eklediğinizde ardışık dilimler oluşur. Dış kabın sabit yüksekliği 1rem'dir ve overflow: hidden köşe yuvarlaklığının iç çubuğu da kırpmasını sağlar; kaynak koddaki yorum satırı bunu açıkça "köşeleri kırparak yuvarlatmak" diye açıklar. İç çubuk da bir flex kapsayıcıdır ve justify-content: center ile içindeki etiketi dikeyde ortalar. Metin beyazdır, ortalanır ve white-space: nowrap nedeniyle alt satıra kırılmaz. Son olarak transition: width 0.6s ease sayesinde genişliği değiştirdiğinizde çubuk birden zıplamaz, yumuşakça uzar.

Genişliği vermek: satır içi stil ya da yardımcı sınıf

Çubuğun ne kadar dolu görüneceğini width belirler. En esnek yol satır içi stildir, çünkü yüzde 1 ile 100 arasındaki her değeri yazabilirsiniz. Değer yalnızca dörtte bir adımlarla değişiyorsa Bootstrap'in genişlik yardımcıları işinizi görür: .w-25, .w-50, .w-75 ve .w-100. Bu yardımcıların kuralları ve diğer boyut sınıfları Bootstrap boyut sınıfları yazısında.

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

Burada dikkat edilmesi gereken nokta görünen genişlik ile aria-valuenow değerinin aynı bilgiyi taşımasıdır. Bootstrap bu iki değeri birbirine bağlamaz: genişliği 75% yapıp aria-valuenow değerini 25 bırakırsanız görsel kullanıcı ile ekran okuyucu kullanıcısı farklı bir durum öğrenir. İlerlemeyi JavaScript ile güncelliyorsanız her adımda hem style.width değerini hem aria-valuenow özniteliğini birlikte değiştirin. aria-valuemin ve aria-valuemax ölçeğin uçlarını söyler; örneklerde 0 ile 100 kullanılır. ARIA özniteliklerinin genel anlamı ARIA rol ve öznitelikleri yazısında.

Etiket eklemek

Çubuğun üzerinde yüzdeyi yazmak için metni doğrudan .progress-bar öğesinin içine koyarsınız. Etiket çubuğun içinde ortalanır; dış kabın yazı boyutu 0.75rem olduğundan küçük ve okunaklı bir yazı elde edersiniz.

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

Yükseklik

Bootstrap yükseklik değerini yalnızca dıştaki .progress öğesine verir; iç çubuk bu yüksekliği otomatik izler. Bu yüzden ince bir çizgi ya da kalın bir çubuk istiyorsanız yüksekliği dış kaba yazın. Belgelerin örneğinde 1px ve 20px yüksekliğinde iki çubuk vardı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 mt-3" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Çok ince bir çubukta etiket kullanmayın; 1px yüksekliğindeki bir kapta metin zaten görünmez. Tüm çubukların varsayılan yüksekliğini değiştirmek istiyorsanız Sass tarafındaki $progress-height değişkenini kullanın.

Renkler

İlerleme çubuklarının kendi renk sınıfları yoktur; iç çubuğa arka plan yardımcısı eklenir: .bg-success, .bg-info, .bg-warning, .bg-danger ve diğerleri. Arka plan yardımcıları derlenmiş CSS'te !important ile tanımlandığı için çubuğun varsayılan mavi zeminini ezer. Renklerin tamamı Bootstrap renk sınıfları yazısında.

<div class="progress mb-2">
  <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 mb-2">
  <div class="progress-bar bg-warning text-dark" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</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>

Etiketli bir çubukta açık zemin seçtiğinizde metin rengini de değiştirmeyi unutmayın. Çubuğun metni varsayılan olarak beyazdır ve arka plan yardımcıları yalnızca background-color ayarlar; bu yüzden örnekteki sarı çubuğa text-dark eklendi. Rengin anlamı (kırmızı "kritik" gibi) ekran okuyucuya ulaşmaz; çubuğun ne ölçtüğünü yakınındaki metinle anlatın.

Birden fazla çubuk

Aynı .progress içine birden fazla .progress-bar koyabilirsiniz. Dış kap flex olduğu için dilimler yan yana dizilir ve her biri kendi genişliği kadar yer kaplar. Bir dosya alanının türlere göre doluluğu ya da bir projenin aşamaları gibi parçalı bir bütünü göstermek için kullanışlıdır. Genişliklerin toplamının 100'ü geçmemesine dikkat edin; dış kap overflow: hidden olduğundan fazlası görünmez.

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

Belgelerdeki örnekte her dilim kendi role="progressbar" ve aria-valuenow değerini taşır. Bu durumda ekran okuyucu her dilimi ayrı bir ilerleme çubuğu olarak duyurabilir; dilimlerin neyi temsil ettiğini yakındaki bir açıklama ya da lejantla yazılı olarak verin.

Çizgili ve hareketli çizgili çubuk

.progress-bar-striped sınıfı çubuğun zemin renginin üzerine CSS degradesiyle yarı saydam beyaz çizgiler çizer. Derlenmiş CSS'te bu, 45 derecelik bir linear-gradient ve 1rem 1rem boyutlu bir background-size olarak tanımlıdır; yani çizgi aralığı çubuk yüksekliğine göre ayarlanmıştır. Çizgilerin hareket etmesi için ayrıca .progress-bar-animated eklenir; belgelere göre çizgiler CSS animasyonuyla sağdan sola kayar. Hareketli çizgiler ancak çizgili bir çubukta anlam taşır, bu yüzden ikisini birlikte yazın.

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

Hareketli çizgiler, ne zaman biteceği bilinmeyen ama sürmekte olan bir işi göstermenin yaygın bir yoludur. Örneğin bir yükleme yüzde 100'e ulaştıktan sonra sunucunun dosyayı işlemesini beklerken çubuğu dolu ve hareketli bırakabilirsiniz. İş bittiğinde .progress-bar-animated sınıfını kaldırmak sizin kodunuzun işidir.

Azaltılmış hareket ve $enable-transitions

Kaynak koddaki _progress.scss iki koşul içerir. Birincisi, hem progress-bar-stripes animasyon tanımı hem .progress-bar-animated sınıfı $enable-transitions seçeneği açıkken derlenir; bu seçeneği kapatırsanız hareketli çizgi sınıfı hiç üretilmez. İkincisi, $enable-reduced-motion açıkken prefers-reduced-motion: reduce sorgusu animasyonu animation: none ile tamamen durdurur. Derlenmiş CSS'te bu kural görülebilir. Spinner'lardan farklı olarak burada animasyon yavaşlatılmaz, kapatılır; çizgiler yerinde durur ama çubuk görünmeye devam eder. Bu seçeneklerin tamamı Bootstrap enable seçenekleri yazısında.

Uygulamalı mini örnek: disk kullanım göstergesi

Bir hosting kontrol panelinde disk alanının ne kadarının hangi içerikle dolduğunu gösterelim. Başlıkta toplam doluluk yazılı, çubukta üç dilim var ve altta bir lejant dilimlerin anlamını metinle açıklıyor.

<div class="d-flex justify-content-between mb-1">
  <span>Disk kullanımı</span>
  <span>10 GB alanın 6,5 GB kadarı dolu</span>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">Dosyalar</div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">E-posta</div>
  <div class="progress-bar bg-warning text-dark" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<ul class="list-inline small text-muted mt-2">
  <li class="list-inline-item">Mavi: dosyalar yüzde 40</li>
  <li class="list-inline-item">Yeşil: e-posta yüzde 15</li>
  <li class="list-inline-item">Sarı: veritabanı yüzde 10</li>
</ul>

Sarı dilim yüzde 10 genişlikte olduğu için etiket koymadık; kısa bir kelime bile kırpılabilirdi. Yükseklik 20px yapıldı, çünkü varsayılan 1rem yükseklik iki kelimelik etiketler için dar kalabilir. Lejant hem renk körü kullanıcılar hem ekran okuyucular için aynı bilgiyi metin olarak verir. .list-inline ve .list-inline-item sınıfları tipografi sınıfları yazısında anlatılıyor.

İkinci örnek: çok adımlı formda adım göstergesi

İlerleme çubuğu yalnızca yükleme yüzdesi için değil, dört adımlık bir kayıt formunda kullanıcının nerede olduğunu göstermek için de kullanılabilir. Bu durumda ölçek yüzde değil adım sayısıdır. Görsel genişlik CSS gereği yine yüzde olarak verilir (dört adımın ikincisi için yüzde 50), ama ARIA öznitelikleri ölçeğin gerçek uçlarını söyleyebilir: en küçük değer 0, en büyük değer 4, şimdiki değer 2. Etiket olarak da "Adım 2 / 4" gibi okunaklı bir metin yazılır.

<p class="mb-1">Kayıt formu</p>
<div class="progress" style="height: 24px;">
  <div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="2" aria-valuemin="0" aria-valuemax="4">Adım 2 / 4</div>
</div>

Bu kullanımda .progress-bar-animated eklemeyin; hareketli çizgiler sürmekte olan bir işi çağrıştırır, oysa burada kullanıcı bir sonraki adıma geçene kadar hiçbir şey ilerlemez. Kullanıcı bir adım geri döndüğünde genişliği yüzde 25'e, aria-valuenow değerini 1'e indirirsiniz; CSS'teki genişlik geçişi sayesinde çubuk geriye doğru da yumuşakça kısalır. Adım başlıklarını ayrıca metin olarak göstermek, çubuğu yalnızca destekleyici bir görsel hâline getirir ve ekran okuyucu kullanıcıları için de daha anlaşılır bir yapı kurar.

Sass değişkenleri

Tablodaki iki ayrıntı özellikle işe yarar. $progress-bar-bg varsayılan olarak $primary değerini kullandığı için marka renginizi $primary üzerinden değiştirdiğinizde ilerleme çubukları da kendiliğinden o renge geçer. $progress-box-shadow ise yalnızca $enable-shadows açıkken derlenen bir iç gölgedir; varsayılan derlemede bu seçenek kapalı olduğundan derlenmiş CSS'teki .progress kuralında gölge satırı yoktur. Değişkenleri ezme yöntemi Sass ile özelleştirme yazısında anlatılıyor.

Sık yapılan hatalar

• Genişlik vermemek: .progress-bar kendi genişliğini hesaplamaz; width yoksa çubuk görünmez.
• Yüksekliği iç çubuğa yazmak: Yükseklik dış .progress öğesine verilir, iç çubuk onu izler.
• aria-valuenow değerini güncellememek: Görsel ve sözel bilgi birbirinden ayrılır.
• Rengi dış kaba vermek: bg-* yardımcısı iç çubuğa eklenir; dış kaba eklerseniz boş kısım boyanır.
• Dar çubuğa etiket koymak: Metin kırpılır.
• Animated sınıfını tek başına kullanmak: Hareket edecek çizgiler .progress-bar-striped ile gelir.
• Toplamı 100'ü aşan dilimler: Taşan kısım overflow: hidden nedeniyle kesilir.

Sık Sorulan Sorular

Bootstrap progress bar'ı JavaScript ile nasıl güncellerim?

Bootstrap'in bu bileşen için bir JavaScript eklentisi yoktur. Kendi kodunuzda iç çubuğun style.width değerini ve aria-valuenow özniteliğini değiştirirsiniz; width geçişi CSS'te tanımlı olduğu için değişim yumuşak görünür. Dilin temelleri için JavaScript öğrenme rehberine bakabilirsiniz.

Dikey bir ilerleme çubuğu var mı?

Bootstrap 5.0 belgelerinde dikey bir progress varyantı yoktur. Bileşen yatay bir flex yapısıyla kuruludur.

Progress bar ile spinner arasında nasıl seçim yaparım?

İlerlemenin oranını biliyorsanız progress bar, bilmiyorsanız spinner kullanın. Spinner seçenekleri badge ve spinner yazısında.

Çubuğun boş kısmının rengini değiştirebilir miyim?

Boş kısım dış .progress öğesinin zeminidir ve derlenmiş CSS'te açık gri (#e9ecef) tanımlıdır. Dış kaba bir bg-* yardımcısı eklerseniz, yardımcı !important taşıdığı için bu gri ezilir. Tüm çubuklar için kalıcı bir değişiklik istiyorsanız Sass'taki $progress-bg değişkenini kullanın.

Çubuğun köşelerini düz yapabilir miyim?

Evet. Dış kaba .rounded-0 ekleyebilir ya da Sass'ta $progress-border-radius değerini 0 yapabilirsiniz.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Badge ve spinner · Boyut sınıfları · Renk sınıfları · Enable seçenekleri · ARIA rehberi