Cara Membuat Progress Bar di Bootstrap 4

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

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>

Lihat kode di Github | Lihat Live Demo


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:

 Tinggi Progress Bar

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

Lihat kode di Github | Lihat Live Demo

Membuat Progress Bar Berlabel

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

Membuat Progress Bar Berlabel

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

Lihat kode di Github | Lihat Live Demo

Progress Bar Berwarna

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

Progress Bar Berwarna

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

Lihat kode di Github | Lihat Live Demo

Progress Bar Bergaris (Striped)

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

Progress Bar Bergaris (Striped)

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

Lihat kode di Github | Lihat Live Demo

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>

Lihat kode di Github | Lihat Live Demo

Progress Bar Bertumpuk

Kita juga dapat membuat Progress Bar menjadi bertumpuk. Contoh:

Progress Bar Bertumpuk

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

Lihat kode di Github | Lihat Live Demo

0 Komentar