Bootstrap 4 Progress Bar
Bilah Kemajuan Dasar
Bilah kemajuan dapat digunakan untuk menunjukkan kepada pengguna seberapa jauh dia dalam suatu proses.
Untuk membuat bilah kemajuan default, tambahkan .progresskelas ke elemen penampung dan tambahkan .progress-barkelas ke elemen turunannya. Gunakan properti CSS widthuntuk mengatur lebar bilah kemajuan:
Contoh
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
Ketinggian Bilah Kemajuan
Ketinggian bilah kemajuan adalah 16px secara default. Gunakan properti CSS heightuntuk mengubahnya. Perhatikan bahwa Anda harus mengatur ketinggian yang sama untuk wadah kemajuan dan bilah kemajuan:
Contoh
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
Label Bilah Kemajuan
Tambahkan teks di dalam bilah kemajuan untuk menunjukkan persentase yang terlihat:
Contoh
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
Bilah Kemajuan Berwarna
Secara default, bilah kemajuan berwarna biru (utama). Gunakan salah satu dari kelas latar belakang kontekstual Bootstrap 4 untuk mengubah warnanya:
Contoh
<!-- Blue -->
<div class="progress">
<div class="progress-bar"
style="width:10%"></div>
</div>
<!-- Green -->
<div
class="progress">
<div
class="progress-bar bg-success" style="width:20%"></div>
</div>
<!--
Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning"
style="width:40%"></div>
</div>
<!-- Red -->
<div
class="progress">
<div class="progress-bar bg-danger"
style="width:50%"></div>
</div>
<!-- White -->
<div
class="progress border">
<div
class="progress-bar bg-white" style="width:60%"></div>
</div>
<!--
Grey -->
<div class="progress">
<div class="progress-bar bg-secondary"
style="width:70%"></div>
</div>
<!-- Light Grey -->
<div
class="progress border">
<div class="progress-bar bg-light"
style="width:80%"></div>
</div>
<!--
Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
Bilah Kemajuan Bergaris
Gunakan .progress-bar-stripedkelas untuk menambahkan garis ke bilah kemajuan:
Contoh
<div class="progress">
<div class="progress-bar
progress-bar-striped" style="width:40%"></div>
</div>
Bilah Kemajuan Animasi
Tambahkan .progress-bar-animatedkelas untuk menganimasikan bilah kemajuan:
Contoh
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:40%"></div>
Beberapa Bilah Kemajuan
Bilah kemajuan juga dapat ditumpuk:
Contoh
<div class="progress">
<div class="progress-bar bg-success"
style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger"
style="width:20%">
Danger
</div>
</div>