İlerleme Barlar
Bir ilerleme çubuğu bir süreçte ne kadar bir kullanıcı boyunca göstermek için kullanılabilir:
Temel İlerleme Çubuğu
W3-ilerleme kabı sınıfı ilerleme çubuğu için bir kabı tanımlar ve w3-progressbar gerçek bir ilerleme çubuğunu tanımlar (the "filled" area) . CSS genişlik özelliğiyle ilerleme çubuğunun genişliğini ayarlayın:
Örnek
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:10%"></div>
</div>
İlerleme Çubuğu Boyutları
0 ila% 100 arasındaki bir yüzde değeri ile ilerleme çubuğunun genişliği / boyutunu ayarlama:
Örnek
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:50%"></div>
</div>
İlerleme Çubuğu Renkleri
Varsayılan olarak, w3-ilerleme-kabın rengi açık gri ve w3-progressbar gri geçerli:
W3.CSS renk sınıfları herhangi biriyle kendi rengini değiştirin:
Örnek
<div class="w3-progress-container
w3-light-blue">
<div class="w3-progressbar
w3-blue" style="width:75%"></div>
</div>
Yuvarlak İlerleme Barlar
Ilerleme barlara yuvarlatılmış köşeler eklemek için w3-yuvarlak sınıfların herhangi birini kullanın:
Örnek
<div class="w3-progress-container w3-round">
<div
class="w3-progressbar w3-round" style="width:25%"></div>
</div>
İlerleme Çubuğu Etiketleri
Içinde yeni bir öğe ekleyin "w3-progressbar" ilerleme çubuğunun etiket eklemek için.
İpucu: Her zaman merkezli etiketi tutmak için w3-merkez sınıfını kullanın. atlanmış ise, sola hizalanmış olacaktır.
Örnek
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:25%">
<div class="w3-center w3-text-white">25%</div>
</div>
</div>
Dinamik İlerleme Çubuğu
Dinamik bir ilerleme çubuğu oluşturmak için JavaScript kullanın:
Örnek
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:1%"></div>
</div>
<button class="w3-btn" onclick="move()">Click Me</button>
<script>
function move() {
var elem =
document.getElementById("myBar");
var width =
1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
Etiketler Dinamik İlerleme Çubuğu
Merkezli etiket:
-Sol hizalanmış etiketi:
ilerleme çubuğunun dışına etiketle: