tutorial pengembangan web terbaru
 

W3.CSS Bar kemajuan


Bar kemajuan

Sebuah progress bar dapat digunakan untuk menunjukkan seberapa jauh sepanjang pengguna dalam proses:

20%


Dasar Progress Bar

Kelas w3-kemajuan-kontainer mendefinisikan sebuah wadah untuk progress bar, dan w3-progressbar mendefinisikan progress bar yang sebenarnya (yang "penuh" area). Mengatur lebar dari progress bar dengan properti width CSS:

Contoh

<div class="w3-progress-container">
  <div class="w3-progressbar" style="width:10%"></div>
</div>

Cobalah sendiri "


Progress Bar Ukuran

Mengatur lebar / ukuran progress bar dengan nilai persentase dari 0 hingga 100%:



Contoh

<div class="w3-progress-container">
  <div class="w3-progressbar" style="width:50%"></div>
</div>

Cobalah sendiri "


Progress Bar Warna

Secara default, warna w3-kemajuan-kontainer adalah abu-abu terang dan w3-progressbar abu-abu:

Mengubah warna mereka dengan salah satu kelas warna W3.CSS:



Contoh

<div class="w3-progress-container w3-light-blue">
  <div class="w3-progressbar w3-blue" style="width:75%"></div>
</div>

Cobalah sendiri "


Bar Kemajuan bulat

Gunakan salah satu kelas w3-bulat untuk menambahkan sudut dibulatkan ke bar kemajuan Anda:



Contoh

<div class="w3-progress-container w3-round">
  <div class="w3-progressbar w3-round" style="width:25%"></div>
</div>

Cobalah sendiri "


Progress Bar Label

Menambahkan elemen baru dalam "w3-progressbar" untuk menambahkan label untuk progress bar.

Tip: Gunakan kelas w3-pusat untuk selalu menjaga label berpusat. Jika dihilangkan, maka akan rata kiri.

25%

50%

75%

Contoh

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

Cobalah sendiri "


Dinamis Progress Bar

Gunakan JavaScript untuk membuat progress bar yang dinamis:


Contoh

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

Cobalah sendiri "


Dinamis Progress Bar dengan Label

label Centered:

Contoh

20%

Cobalah sendiri "

Selaras kiri label:

Contoh

20%

Cobalah sendiri "

Label luar progress bar:

Contoh

20%

Cobalah sendiri "