Bilah Kemajuan W3.CSS
Bilah kemajuan dapat digunakan untuk menunjukkan seberapa jauh pengguna dalam suatu proses:
Bilah Kemajuan Dasar
Elemen <div> normal dapat digunakan untuk bilah kemajuan.
Properti lebar CSS dapat digunakan untuk mengatur tinggi dan lebar bilah kemajuan.
Contoh
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
Lebar Bilah Kemajuan
Ubah lebar bilah kemajuan dengan properti lebar CSS (dari 0 hingga 100%):
Contoh
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
Warna Bilah Kemajuan
Gunakan kelas warna w3- untuk mengubah warna bilah kemajuan:
Contoh
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
Label Bilah Kemajuan
Tambahkan teks di dalam elemen w3-container untuk menambahkan label ke bilah kemajuan.
Gunakan kelas w3-center untuk memusatkan label. Jika dihilangkan, itu akan dibiarkan rata.
Contoh
<div class="w3-light-grey">
<div
class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
Ukuran Teks Bilah Kemajuan
Gunakan kelas ukuran w3 untuk mengubah ukuran teks dalam wadah:
Contoh
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
Progres Bar Padding
Gunakan kelas w3-padding untuk menambahkan padding ke container.
Contoh
<div class="w3-light-grey">
<div
class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
Bilah Kemajuan Bulat
Gunakan kelas putaran w3 untuk menambahkan sudut membulat ke bilah kemajuan:
Contoh
<div class="w3-light-grey w3-round">
<div
class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
Bilah Kemajuan Dinamis
Gunakan JavaScript untuk membuat bilah kemajuan dinamis:
Contoh
<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>
Bilah Kemajuan Dinamis dengan Label
Label terpusat:
Contoh
Label rata kiri:
Contoh
Label di luar bilah kemajuan:
Contoh
20%
Contoh lain (lanjutan):
Contoh
Added 0 of 10 photos