Bar kemajuan
Sebuah progress bar dapat digunakan untuk menunjukkan seberapa jauh sepanjang pengguna dalam proses:
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>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>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>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>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.
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>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>Dinamis Progress Bar dengan Label
label Centered:
Selaras kiri label:
Label luar progress bar: