Membuat Progress Bar pada Bootstrap 4

12/09/2017    Maykhel David    38     Website

Hallo semuanya, banyak sekali penggunaan plugin untuk membuat sebuah bagan, chart, atau diagram untuk memberikan demonstrasi data pada sebuah website. Bootstrap adalah sebuah framework HTML, CSS, dan javascript untuk membantu dalam membuat tampilan website responsive sehingga bisa dibuka pada device mobile seperti tablet dan smartphone.

Pada bootstrap juga telah dibuat sebuah plugin untuk memberikan demonstrasi data pada website berupa progress bar. Sebelumnya juga dumetschool pernah membahas tentang pembuatan progressbar pada artikel yang berjudul Membuat Progress Bar Menggunakan Bootstrap.

Pada bootstrap 4 juga terdapat progressbar yang telah dimodifikasi dari versi sebelumnya agar lebih sederhana dan efisien. Contoh penggunaannya adalah seperti ini

<div class="progress">
  <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">
  <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">
  <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">
  <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">
  <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>

Pada kode diatas terdapat width untuk memberikan lebar dan aria-valuenow sebagai pemberi nilai pada progressbar, dan ada juga class .progress-bar-striped untuk memberikan garis belang pada progressbar.

Kita juga bisa membuat multi progressbar jika dibutuhkan untuk memberikan simulasi beberapa data sekaligus seperti dibawah ini.

<div class="progress">
  <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>

Pada progressbar ini juga terdapat animasi untuk membuat tampak lebih hidup kita bisa gunakan class .progress-bar-animated untuk memberikan animasi pada progressbar.

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

Baiklah teman-teman demikian artikel kali ini yang membahas tentang cara membuat progressbar dengan bootstrap 4. Jika ada yang tertarik mungkin kalian bisa baca artikel untuk menjadikan progressbar menjadi dinamis dengan membaca artikel yang berjudul Membuat Progress Bar Dinamis dengan Ajax.

 

 

Tips dan Trik, Bootstrap, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More