Pada tuturial sebelumnya, kita sudah belajar Tutorial Belajar Bootstrap Bagian 23 : Cara Membuat Badge di Bootstrap, selanjutnya kita akan belajar cara membuat progress bar di Bootstrap.
Progress bar dapat digunakan untuk menunjukkan kemajuan suatu tugas atau tindakan kepada pengguna. Contoh berikut akan menunjukkan kepada Anda cara membuat progress bar sederhana dengan gradien vertikal.
<div class="progress">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 100%"></div>
</div>
Membuat Progress Bar dengan Label
Untuk menampilkan status kemajuan dengan label persentase, hapus saja <span> dengan class khusus .sr dari dalam progress bar seperti yang ditunjukkan pada contoh di atas.
<div class="progress">
<div class="progress-bar" style="width: 25%">
25%
</div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 50%">
50%
</div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 75%">
75%
</div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 100%">
100%
</div>
</div>
Jika Anda menampilkan label persentase, Anda juga harus menerapkan lebar minimum ke progress bar untuk memastikan bahwa teks label tetap dapat dibaca bahkan untuk persentase kecil, seperti ini:
<div class="progress">
<div class="progress-bar" style="min-width: 20px;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" style="min-width: 20px; width: 2%;">
2%
</div>
</div>
Mengatur Ketinggian Progress Bar
Tinggi default dari progress-bar adalah 16px, tetapi Anda juga dapat mengatur tingginya sesuai dengan kebutuhan dengan mengatur properti CSS height pada elemen .progress, seperti ini:
<!-- Progress bar dengan tinggi 1px -->
<div class="progress" style="height: 1px;">
<div class="progress-bar" style="width: 50%;"></div>
</div>
<!-- Progress bar dengan tinggi 20px -->
<div class="progress" style="height: 20px;">
<div class="progress-bar" style="width: 50%;"></div>
Membuat Stripped Progress Bar
Untuk membuat stripped progress bar cukup tambahkan class ekstra .progress-bar-striped ke elemen .progress-bar, seperti yang ditunjukkan pada contoh berikut:
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 60%;"></div>
</div>
Membuat Progress Bar Animasi
Anda juga dapat menganimasikan stripped progress bar. Tambahkan class .progress-bar-animated ke elemen .progress-bar, ini akan menganimasikan garis dari kanan ke kiri melalui animasi CSS3.
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%"></div>
</div>
Mengubah Nilai Progress Bar Secara Dinamis
Progress bar statis tidak terlalu mengesankan. Contoh berikut akan memberi Anda gambaran kasar tentang cara memperbarui status progress bar Bootstrap secara dinamis menggunakan jQuery.
<!-- Progress bar HTML -->
<div class="progress">
<div class="progress-bar progress-bar-striped" style="min-width: 20px;"></div>
</div>
<!-- jQuery Script -->
<script>
var i = 0;
function makeProgress(){
if(i < 100){
i = i + 1;
$(".progress-bar").css("width", i + "%").text(i + " %");
}
// Tunggu beberapa saat sebelum menjalankan skrip ini lagi
setTimeout("makeProgress()", 100);
}
makeProgress();
</script>
Membuat Stacked Progress Bar
Anda juga dapat menempatkan beberapa bar ke dalam progress bar yang sama untuk menumpuknya.
<div class="progress">
<div class="progress-bar bg-success" style="width: 40%">
File Program (40%)
</div>
<div class="progress-bar bg-warning" style="width: 25%">
File Sisa (25%)
</div>
<div class="progress-bar bg-danger" style="width: 15%">
File Sampah (15%)
</div>
</div>
Progress bar dengan Emphasis Class
Bootstrap juga menyediakan beberapa class utilitas penekanan untuk progress bar, yang selanjutnya dapat digunakan untuk menyampaikan makna melalui warna, seperti yang ditunjukkan pada contoh berikut:
<div class="progress">
<div class="progress-bar bg-info" style="width: 20%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-success" style="width: 40%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width: 80%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width: 90%"></div>
</div>
<hr />
<div class="progress">
<div class="progress-bar bg-info" style="width: 20%">
Ruang Disk: 80% kosong
</div>
</div>
<div class="progress">
<div class="progress-bar bg-success" style="width: 40%">
Ruang Disk yang Cukup: 60% kosong
</div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width: 80%">
Kekurangan Kapasitas Disk: 80% penuh
</div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width: 90%">
Tidak Cukup Ruang pada Disk: 90% penuh
</div>
</div>
Progress Bar Bergaris dengan Emphasis Class
Mirip dengan warna solid, Anda juga dapat membuat progress bar bergaris yang bervariasi.
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" style="width: 20%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" style="width: 40%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" style="width: 80%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" style="width: 90%"></div>
</div>
<hr />
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" style="width: 20%">
Ruang Disk: 80% kosong
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" style="width: 40%">
Ruang Disk yang Cukup: 60% kosong
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" style="width: 80%">
Ruang Disk yang Rendah: 80% penuh
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" style="width: 90%">
Ruang Disk Tidak Cukup: 90% penuh
</div>
</div>
Semoga tutorial ini bisa membantu Anda untuk belajar cara membuat progress bar di Bootstrap.
