Bilah Kemajuan Bootstrap
Bilah Kemajuan Dasar
Bilah kemajuan dapat digunakan untuk menunjukkan kepada pengguna seberapa jauh dia dalam suatu proses.
Bootstrap menyediakan beberapa jenis progress bar.
Bilah kemajuan default di Bootstrap terlihat seperti ini:
Untuk membuat bilah kemajuan default, tambahkan .progresskelas ke <div>elemen:
Contoh
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
Catatan: Progress bar tidak didukung di Internet Explorer 9 dan yang lebih lama (karena mereka menggunakan transisi dan animasi CSS3 untuk mencapai beberapa efeknya).
Catatan: Untuk membantu meningkatkan aksesibilitas bagi orang yang menggunakan pembaca layar, Anda harus menyertakan atribut aria-*.
Bilah Kemajuan Dengan Label
Bilah kemajuan dengan label terlihat seperti ini:
Hapus .sr-onlykelas dari bilah kemajuan untuk menampilkan persentase yang terlihat:
Contoh
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
Bilah Kemajuan Berwarna
Kelas kontekstual digunakan untuk memberikan "makna melalui warna".
Kelas kontekstual yang dapat digunakan dengan bilah kemajuan adalah:
.progress-bar-success.progress-bar-info.progress-bar-warning.progress-bar-danger
Contoh berikut menunjukkan cara membuat bilah kemajuan dengan kelas kontekstual yang berbeda:
Contoh
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70% Complete (danger)
</div>
</div>
Bilah Kemajuan Bergaris
Bilah kemajuan juga dapat bergaris:
Tambahkan kelas .progress-bar-stripeduntuk menambahkan garis ke bilah kemajuan:
Contoh
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
70% Complete (danger)
</div>
</div>
Bilah Kemajuan Animasi
Tambahkan kelas .activeuntuk menganimasikan bilah kemajuan:
Contoh
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40%
</div>
</div>
Bilah Kemajuan Bertumpuk
Bilah kemajuan juga dapat ditumpuk:
Buat bilah kemajuan bertumpuk dengan menempatkan beberapa bilah ke dalam yang sama <div class="progress">:
Contoh
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
Free Space
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
Warning
</div>
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
Danger
</div>
</div>