W3.CSS İlerleme Çubukları
Bir kullanıcının bir süreçte ne kadar ilerlediğini göstermek için bir ilerleme çubuğu kullanılabilir:
Temel İlerleme Çubuğu
Bir ilerleme çubuğu için normal bir <div> öğesi kullanılabilir.
CSS genişlik özelliği, bir ilerleme çubuğunun yüksekliğini ve genişliğini ayarlamak için kullanılabilir.
Örnek
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
İlerleme Çubuğu Genişliği
CSS genişlik özelliğiyle ilerleme çubuğunun genişliğini değiştirin (%0'dan %100'e):
Örnek
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
İlerleme Çubuğu Renkleri
İlerleme çubuğunun rengini değiştirmek için w3- renk sınıflarını kullanın :
Örnek
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
İlerleme Çubuğu Etiketleri
İlerleme çubuğuna bir etiket eklemek için w3 kapsayıcı öğesinin içine metin ekleyin.
Etiketi ortalamak için w3-center sınıfını kullanın. Atlanırsa, sola hizalanır.
Örnek
<div class="w3-light-grey">
<div
class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
İlerleme Çubuğu Metin Boyutu
Kaptaki metin boyutunu değiştirmek için w3 boyutu sınıflarını kullanın :
Örnek
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
İlerleme Çubuğu Dolgusu
Kapsayıcıya dolgu eklemek için w3-padding sınıflarını kullanın.
Örnek
<div class="w3-light-grey">
<div
class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
Yuvarlak İlerleme Çubukları
İlerleme çubuğuna yuvarlatılmış köşeler eklemek için w3-round sınıflarını kullanın:
Örnek
<div class="w3-light-grey w3-round">
<div
class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
Dinamik İlerleme Çubuğu
Dinamik bir ilerleme çubuğu oluşturmak için JavaScript kullanın:
Örnek
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green"
style="height:24px;width:1%"></div>
</div>
<button class="w3-button w3-light-grey" 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>
Etiketlerle Dinamik İlerleme Çubuğu
Ortalanmış etiket:
Örnek
Sola hizalanmış etiket:
Örnek
İlerleme çubuğunun dışındaki etiket:
Örnek
20%
Başka bir örnek (gelişmiş):
Örnek
Added 0 of 10 photos