Progress Bar berfungsi untuk menunjukkan kepada pengguna tentang suatu Proses atau Progress. Berikut adalah contoh tampilan dari Progress Bar:

Untuk membuat Progress Bar, kita dapat menggunakan class .progress kedalam elemen Container dan menambahkan class .progress-bar kedalam elemen Child. Untuk mengatur lebar dari Progress Bar, kita dapat menggunakan property width. Contoh:

<div class="progress">
    <div class="progress-bar" style="width:70%"></div>
</div>

Tinggi Progress Bar

Secara Default, tinggi dari Progress Bar pada Bootstrap adalah 16px. Untuk mengaturnya, kita dapat menggunakan property height. Perlu diingat juga bahwa kita perlu mengatur tinggi yang sama pada Container dan Progress Bar. Contoh:

<div class="progress" style="height:30px">
    <div class="progress-bar" style="width:60%;height:30px"></div>
</div>

Membuat Progress Bar Berlabel

Kita juga dapat memasukkan teks kedalam Progress Bar yang biasanya berfungsi  untuk menampilkan presentase. Contoh:

<div class="progress">
    <div class="progress-bar" style="width:70%">70%</div>
</div>

Progress Bar Berwarna

Secara Default, Progress Bar pada Bootstrap berwarna biru (Primary). Untuk mengatur warnanya, kita dapat menggunakan class kontekstual. Contoh:

<!-- Biru -->
<div class="progress">
    <div class="progress-bar" style="width:10%"></div>
</div>

<!-- Hijau -->
<div class="progress">
    <div class="progress-bar bg-success" style="width:20%"></div>
</div>

<!-- Hijau 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>

<!-- Merah -->
<div class="progress">
    <div class="progress-bar bg-danger" style="width:50%"></div>
</div>

<!-- Putih -->
<div class="progress border">
    <div class="progress-bar bg-white" style="width:60%"></div>
</div>

<!-- Abu-Abu -->
<div class="progress">
    <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>

<!-- Abu-Abu Terang -->
<div class="progress border">
    <div class="progress-bar bg-light" style="width:80%"></div>
</div>

<!-- Abu-Abu Gelap -->
<div class="progress">
    <div class="progress-bar bg-dark" style="width:90%"></div>
</div>

Progress Bar Bergaris (Striped)

Kita dapat menggunakan class .progress-bar-striped untuk membuat Progress Bar menjadi bergaris. Contoh:

<div class="progress">
    <div class="progress-bar progress-bar-striped" style="width:30%"></div>
</div>

Animasi Progress Bar

Kita juga dapat menambahkan animasi pada Progress Bar dengan cara memasukkan class .progress-bar-animated. Contoh:

<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
</div>

Progress Bar Bertumpuk

Kita juga dapat membuat Progress Bar menjadi bertumpuk. Contoh:

<div class="progress">
    <div class="progress-bar bg-success" style="width:40%">
        Baris Kosong
    </div>
    <div class="progress-bar bg-warning" style="width:10%">
        Warning
    </div>
    <div class="progress-bar bg-danger" style="width:20%">
        Danger
    </div>
</div>