Cara Membuat Progress Bar dengan Cepat dan Bagus Menggunakan Bootstrap

Progress memiliki manfaat yang cukup besar untuk pribadi kita sendiri maupun perusahaan, kenapa ko bisa begitu? karena progress bar tersebut yang menunjukkan atau mengidentifikasi seberapa banyak dan besar hasil atau kemampuan yang kita miliki dan hal tersebut dapat dilihat oleh banyak manusia.

Bootstrap sendiri menyediakan beberapa tipe progress bar yang dapat kita gunakan, tinggal kitanya saja mau menggunakan yang mana :). Yook langsung melihat contoh yang paling sederhana dulu.

Progress bar barpaling sederhana

80% Bisa

kode HTMLnya akan nampak persis dibawah ini.

<h2>Progress bar yang paling sederhana</h2>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80%" class="progress-bar" style="width: 80%;">
<span class="sr-only">80% Bisa</span>
</div>

diatas tersebut adalah progress bar yang paling sederhana dan mudah untuk dimplementasikan, naum perlu diperhatikan progress bar tidak mendukung di internet explorer 9 dan versi terdahulunya,kenapa ko begitu? karena progress bar menggunakan css3 transisi dan animasi untuk memberikan effect pada progress bae tersebut. Untuk dapat diketahui dan dibaca oleh orang lain kita harus menggunakan attribute aria-* agar lebih terlihat oleh mata :).

Progress bar dengan menggunakan label 

pada sesi progress bar kali ini akan menampilkan seberapa persenkah kita menguasai coding atau sejenisnya.

80% Saya Bisa

kode HTML

<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80%" class="progress-bar" style="width: 80%;">
80% Saya Bisa
</div>
</div>

untuk menampilkan label pada progress bar, hilangkan class .sr-only pada <span> atau tanpa menggunakan elemen <span> seperti diatas. 

Progress bar dengan warna

80% Saya Bisa

80% Saya Bisa

40% Saya Bisa

20% Saya Bisa

kode HTML

<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80%" class="progress-bar progress-bar-success" style="width: 80%;">
80% Saya Bisa
</div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80%" class="progress-bar progress-bar-info" style="width: 80%;">
80% Saya Bisa
</div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80%" class="progress-bar progress-bar-warning" style="width: 40%;">
40% Saya Bisa
</div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80%" class="progress-bar progress-bar-danger" style="width: 20%;">
20% Saya Bisa
</div>
</div>

gunakan class .progress-bar-success agar ada warna hijau pada progress bar tersebut dan seterusnya sesuai dengan warna yang sudah ada :D. Jika ingin menggunakan warna lain biasa dicustom sendiri hehe.

Progress bar striped

Sesi yang satu ini sama persis dengan sesi diatasnya hanya saja menambahkan class .progress-bar-striped pada elemen <div> tepatnya di class .progress-bar progress-bar-success ........ contoh

80% Saya Bisa

80% Saya Bisa

40% Saya Bisa

20% Saya Bisa

kode HTMLnya

<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80%" class="progress-bar progress-bar-success progress-bar-striped" style="width: 80%;">
80% Saya Bisa
</div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80%" class="progress-bar progress-bar-info progress-bar-striped" style="width: 80%;">
80% Saya Bisa
</div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80%" class="progress-bar progress-bar-warning progress-bar-striped" style="width: 40%;">
40% Saya Bisa
</div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80%" class="progress-bar progress-bar-danger progress-bar-striped" style="width: 20%;">
20% Saya Bisa
</div>
</div>

Progress bar animasi

Sesi yang satu ini sama persis dengan sesi diatasnya hanya saja menambahkan class .active pada elemen <div> tepatnya di class .progress-bar progress-bar-success progress-bar-stiped........ contoh

80% Saya Bisa

80% Saya Bisa

40% Saya Bisa

20% Saya Bisa

kode HTML

<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80%" class="progress-bar progress-bar-success progress-bar-striped active" style="width: 80%;">
80% Saya Bisa
</div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80%" class="progress-bar progress-bar-info progress-bar-striped active" style="width: 80%;">
80% Saya Bisa
</div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80%" class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 40%;">
40% Saya Bisa
</div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80%" class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 20%;">
20% Saya Bisa
</div>
</div>

Nah itulah cara menggunakan progress bar bootstrap, semoga dapat membantu kita semua ....:D selamat mencoba sambil leyeh-leyeh...