Cara Membuat Progress Bar dengan Bootstrap 4 – Hai ketemu lagi dengan saya dan pada kesempatan kali ini saya akan membahas tentang bootstrap lagi karena ada banyak elemen yang ada pada bootstrap dan akan saya bahas satu persatu. Pada postingan ini saya akan membahas tentang progress bar. Bootstrap sendiri juga menyediakan progressbar untuk kepentingan pembuatan website atau aplikasi. Progressbar sendiri berfungsi untuk memberikan pemberitahuan kepada pengguna terkait progress yang ada sudah berapa persen. Untuk jenisnya juga ada banyak dan akan saya jelaksn satu persatu. Namun sebelum membuat progressbar, kita perlu memasukkan librari css dari bootstrap seperti dibawah
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
Kode diatas merupakan css online, jika sobat belum memasukkan css dari bootstrap pada project sobat maka untuk development sobat harus mendownloadnya terlebih dahulu.
Macam-macam Progress bar
Pada bootstrap ada beberapa jenis progressbar yaitu :
1. Progress bar standar
<div class="progress mb-2"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-2"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-2"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-2"> <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-2"> <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-2"> <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div>
Hasilnya :
2. Progress bar dengan pesentase
Beikut adalah cara menambahkan presentase pada progress bar dengan teks. Berikut adalah contohnya
<div class="progress mb-2"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> <div class="progress mb-2"> <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div> </div> <div class="progress mb-2"> <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div> </div>
Hasilnya :
3. Progress bar Height
Kita juga bisa menentukan tinggi atau besar progress bar, caranya adalah sebagai berikut :
<div class="progress mb-2" style="height: 2px;"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-2" style="height: 20px;"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div>
Hasilnya :
4. Progressbar Style/Warna
Seperti elemen bootstrap lainnya, pada progressbar juga bisa memberikan warna bawaan bootstrap seperti pada button, warna teks, dan lain-lain. Caranya adalah sebagai berikut :
<div class="progress mb-2"> <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-2"> <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-2"> <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-2"> <div class="progress-bar bg-danger" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-2"> <div class="progress-bar bg-primary" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-2"> <div class="progress-bar bg-secondary" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-2"> <div class="progress-bar bg-dark" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div> </div>
Hasilnya :
5. Multiple Progress bar
Pada progressbar ini kita bisa memberikan beberapa warna sekaligus pada progressbarnya, caranya yaitu :
<div class="progress mb-2"> <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> </div>
Hasilnya :
6. Progress bar Stripped
Pada contoh diatas progressbarnya polos, tapi kita bisa memberikan garis/strip pada progress bar sehingga tidak terkesan membosankan dan tentunya kita juga bisa memberikan warna, caranya yaitu
<div class="progress mb-2"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-2"> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-2"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-2"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-2"> <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-2"> <div class="progress-bar progress-bar-striped bg-secondary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-2"> <div class="progress-bar progress-bar-striped bg-dark" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>
Hasilnya :
7. Progressbar dengan animasi
Pada progressbar stripped, kita bisa membuat animasinya. Animasi ini akan menjadikan garis seperti berjalan, berikut adalah cara penulisannya :
<div class="progress mb-2"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 25%"></div> </div> <div class="progress mb-2"> <div class="progress-bar progress-bar-striped bg-danger progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div> </div> <div class="progress mb-2"> <div class="progress-bar progress-bar-striped bg-success progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> </div> <div class="progress mb-2"> <div class="progress-bar progress-bar-striped bg-info progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div> </div> <div class="progress mb-2"> <div class="progress-bar progress-bar-striped bg-secondary progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div> </div> <div class="progress mb-2"> <div class="progress-bar progress-bar-striped bg-dark progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div> </div>
Hasilnya :
8. Menjalankan Progressbar dengan javascript
Untuk menjalankan progressbar kita memerlukan script dari javascript. Pertama kita membuat progressbarnya seperti dibawah
<div class="progress mb-2"> <div class="progress-bar progress-bar-striped bg-primary progress-bar-animated" id="bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 1%"></div> </div> <button class="btn btn-success" onclick="jalan()">Jalankan</button>
Kemudian pada tag <body> paling bawah kita tuliskan script dibawah
<script>
function jalan() {
var elem = document.getElementById("bar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
Maka hasilnya akan seperti dibawah dan jika sobat klik tombol jalankan maka progressbar akan berjalan. Sebenarnya terserah sobat triggrernya dari mana karena ini keperluan demo jadi saya buat saat klik tombol jalankan.
Untuk melihat pergerakan animasinya sobat bisa lihat pada demonya. Untuk progressbar ini merupakan progressbar standar dan untuk penggunaan secara realnya bisa sobat sesuaikan dan kreasikan dengan kebutuhan sobat. Sekian postingan saya tentang Membuat Progress Bar dengan Bootstrap 4. Jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah dan jika ada kesalahan saya mohon maaf.
Artikel Tentang Bootstrap Lainnya :
Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah
Macam-macam Form Input pada HTML dan Bootstrap
Cara Membuat SweetAlert dan Macam-Macamnya pada PHP
Membuat Bootstrap Modal dan Animasinya pada PHP
Membuat Badges Menggunakan Bootstrap 4
Membuat Alert pada HTML menggunakan Bootstrap 4
Mengenal Bootstrap Typography pada HTML dan Bootstrap 4
Menggunakan Tooltip pada HTML dan Bootstrap 4
Membuat Nested Media Object pada Bootstrap 4
Membuat Navbar dengan Bootstrap 4 dengan Mudah
Membuat Border Menggunakan Bootstrap 4
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :