En son web geliştirme öğreticiler
 

W3.CSS İlerleme Çubukları


İlerleme Barlar

Bir ilerleme çubuğu bir süreçte ne kadar bir kullanıcı boyunca göstermek için kullanılabilir:

% 20


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>

Kendin dene "


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

Kendin dene "


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

Kendin dene "


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>

Kendin dene "


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

% 25

% 50

% 75

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

Kendin dene "


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>

Kendin dene "


Etiketler Dinamik İlerleme Çubuğu

Merkezli etiket:

Örnek

20%

Kendin dene "

-Sol hizalanmış etiketi:

Örnek

20%

Kendin dene "

ilerleme çubuğunun dışına etiketle:

Örnek

20%

Kendin dene "