Bootstrap menyediakan elemen yang dapat menampilkan sebuah Progress Bar dalam berbagai macam jenis, mulai dari basic hingga beranimasi. Progress Bar atau Batang Proses ini umumnya digunakan pada beberapa situs web yang memiliki suatu proses, baik itu proses download, upload, kelengkapan suatu tindakan (seperti: formulir, wizard), dan banyak lagi.
Ada 6 macam Progress Bars Bootstrap yang dapat kamu manfaatkan untuk mempercantik situs web / blog.
Basic Progress Bar
Pertama, harus tau dulu dasar dari progress bar agar mudah memahami progress bar yang lain. Ini adalah contoh dari progress bar dasar:
Baca Juga:
Untuk membuat basic progress bar seperti di atas, cukup copy paste kode di bawah ini:
<h2>Basic Progress Bar Bootstrap - Posciety</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width:65%">
<span class="sr-only">Proses 70%</span>
</div>
</div>
Pada dasarnya, progress bar Bootstrap memerlukan div class progress bar dan class progress-bar (termasuk elemen-elemen di dalamnya) seperti yang terlihat pada struktur kode di atas.
Untuk mengatur jumlah proses (berwarna biru) dapat disesuaikan di bagian aria-valuenow dan style=”width:”, pastikan untuk mengatur aria-valuemin di angka 0 (nol) dan aria-valuemax di angka 100. Artinya angka minimal proses mulai dari 0 sampai 100. Ketika memasukkan nilai angka 50 di aria-valuenow dan style=:width:” maka akan menampilkan proses 50%.
Progress Bar Berwarna
Defaultnya warna progress bar ini dihiasi warna abu-abu sebagai dasar dan warna biru sebagai warna proses, kamu dapat menyesuaikan warna dengan cepat menggunakan contextual classes yang tersedia di Bootstrap.
<h2>Progress Bar Bootstrap Berwarna - Posciety</h2>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">
<span class="sr-only">Proses 30%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width:10%">
<span class="sr-only">Proses 10%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%">
<span class="sr-only">Proses 90%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%">
<span class="sr-only">Proses 100%</span>
</div>
</div>
Perhatikan pada class progress-bar, jika ingin menggunakan warna contextual classes tinggal ditambahkan saja di akhirnya maka menjadi progress-bar-danger. Dari kodingan di atas, hasilnya akan terlihat seperti ini:
Progress bar berwarna merah (danger) menunjukkan proses 30%, progress bar berwarna biru (primary) menunjukkan proses 10%, progress bar berwarna oranye (warning) menunjukkan proses 90%, dan progress bar berwarna hijau (success) menunjukkan proses 100%.
Striped Progress Bar
Striped progress bar tidak berbeda jauh, ini tetap progress bar tapi ditambahkan desain garis pada batang prosesnya. Contoh:
Untuk menampilkan progress bar bergaris seperti ini cukup tambahkan class progress-bar-striped, contoh:
<h2>Striped Progress Bar Bootstrap - Posciety</h2>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100" style="width:67%">
<span class="sr-only">Proses 67%</span>
</div>
</div>
Simpan dan lihat hasilnya !
Progress Bar + Teks
Contoh-contoh progress bars di atas terlihat polos tanpa ada tulisan di tengah batangnya, biasanya lebih baik menampilkan sebuah text atau hanya angka yang mewakili jarak tempuh proses. Misalnya menampilkan angka 70%, atau tulisan sedang diunggah…
Untuk menampilkan tulisan di tengah progress bar cukup menghapus <span class="sr-only"> </span> yang berada di tengah-tengah div, hapus dan gantikan dengan text biasa. Contoh:
<h2>Progress Bar Bootstrap dengan Text - Posciety</h2>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100" style="width:67%">
67%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100" style="width:89%">
Tunggu Sebentar Lagi...
</div>
</div>
Code di atas akan menghasilkan progress bar seperti ini:
Terlihat angka dan teks di dalam proses bar, kamu dapat memasukkan teks apapun disini.
Progress Bars Digabung
Contoh progress bard di atas hanya menampilkan progress bar satu baris satu proses, jika ingin menampilkan progress bar yang menumpuk (digabung) dalam satu batang bisa gunakan kodingan berikut:
<h2>Progress Bars Bootstrap Digabung - Posciety</h2>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:10%">
DISK C
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width:30%">
DISK D
</div>
<div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
DISK Tidak Terpakai
</div>
</div>
Kamu tidak perlu menentukan aria-valuemin dan aria-valuemax, ini sudah diwakilkan dengan style=width:”, jangan lupa untuk menggabungkan semua progress-bar ke dalam satu class progress seperti yang terlihat pada code di atas. Maka hasilnya akan tampil seperti ini:
Kombinasikan huruf, angka, warna, polos / bergaris seperti yang dijelaskan pada contoh-contoh sebelumnya.
Progress Bar dengan Animasi
Sebetulnya cukup tambahkan class active di dalam progress bar, maka progress bar akan bergerak / hidup sehingga terlihat beranimasi. Contoh:
<h2>Progress Bar Bootstrap Beranimasi - Posciety</h2>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="83" aria-valuemin="0" aria-valuemax="100" style="width:83%">
Garisnya Bergerak (hidup)
</div>
</div>
Pastikan untuk menggunakan striped progress bar agar terlihat bergerak.
Ini hanya gambar, tidak akan terlihat begerak. Simpan kodingan di atas dan lihat hasilnya di situs Bootstrap yang kamu kelola.
Progress Bars Bootstrap ini bisa kamu gunakan untuk keperluan apapun dengan tujuan agar pengguna bisa mengetahui bahwa ada sebuah proses yang berjalan dan sejauh mana prosesnya sejauh ini.