Tutorial Belajar Bootstrap 4 Part 12 – Membuat Progress Bar dengan Bootstrap

Selamat datang lagi dalam tutorial warungbelajar, kita masih dalam seri belajar bootstrap 4, jika dalam tutorial sebelumnya kita sudah membahas mengenai cara membuat badges dengan bootstrap, kali ini kita akan membahas mengenai cara membuat progress bar dengan bootstrap.

Progress bar bisa anda gunakan untuk menginformasikan progress pekerjaan ke dalam suatu user interface yang biasanya kita kenal dengan nama progress bar, sehingga dapat mempermudah melakukan pemantauan progress  dari sebuah pekerjaan.

Dalam bootstrap 4 terdapat beberapa class yang bisa anda gunakan untuk membuat dan mengatur tampilan progress bar, baik langsung saja kita akan membahasnya satu persatu.

 

 

Cara membuat progress bar dengan bootstrap

Untuk membuat progress bar menggunakan bootstrap secara sederhana skripnya adalah seperti berikut ini :

Keterangan :

• untuk membuat progress bar, anda hanya perlu menuliskan tag <div> lalu tambahkan class “progress” didalam tag <div> tersebut.
• berikutnya anda perlu membuat tag <div> lagi diantara tag <div></div> sebelumnya, didalam tag <div> tersebut anda perlu menuliskan class “progress-bar” lalu menuliskan style dengan property width dan value yang disesuaikan dengan value untuk progress bar, untuk satuan value adalah persen

 

Mengatur ukuran tinggi dari progress bar

Untuk mengatur tinggi dari progress bar, anda perlu menambahkan property height dan mengisikan value, pada bagian attribute style, untuk contoh skripnya adalah sebagai berikut :

Keterangan :

• perhatikan didalam tag <div> pertama kita menambahkan height:50px; pada bagian attribute style
• tidak hanya itu didalam tag <div> kedua kita juga menuliskan hal yang sama height:50px pada attribute style
• kedua hal tersebut digunakan untuk mengatur ukuran tinggi dari progress bar

 

Menambahkan label pada bagian progress bar

Untuk mengatur label dari progress bar anda hanya perlu menambahkan tulisan diantara tag <div> </div>, untuk contohnya perhatikan skrip dibawah ini :

 

Baik kita sudah belajar mengenai skrip yang digunakan untuk membuat progress bar, mengatur ukuran tinggi dari progress bar, dan menambahkan label progress bar, untuk contoh skrip lengkapnya pembuatan progress bar, silahkan perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama progress_bar.html, lalu kita buka di browser maka hasilnya adalah :

Keterangan :

• pada progress bar pertama menampilkan progress 50% karena kita menuliskan width:50%;
• pada progress bar kedua menampilkan progress 80% karena kita menuliskan width:80%; dan untuk tingginya adalah 100 pixel karena kita menuliskan height:100px

 

 

 

Memberikan warna pada progress bar

Setelah dalam bagian sebelumnya kita telah belajar bagaimana cara membuat progress bar dengan menggunakan class  yang disediakan oleh bootstrap, berikutnya kita akan belajar mengenai bagaimana kita memberikan warna pada progress bar, ada beberapa class yang bisa digunakan untuk memberikan warna pada progress bar, class tersebut antara lain  :

• bg-success
• bg-info
• bg-warning
• bg-danger
• bg-white
• bg-secondary
• bg-light
• bg-dark

Contoh penggunaan skripnya adalah sebagai berikut :

Semisal kita simpan dengan nama warna_progress_bar.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

• warna yang ditampilkan progress bar akan berbeda – beda tergantung class yang dipasang pada progress bar tersebut
• jika anda tidak menggunakan class untuk mengganti warna progress bar, maka warna yang ditampilkan adalah warna biru seperti pada progress bar pertama

 

 

 

Striped Progress Bar

Anda tidak hanya bisa mengganti warna pada bagian progress bar, tapi anda juga bisa memberikan pola striped pada progress bar yang anda buat, caranya anda hanya perlu menuliskan menambahkan class .progress-bar-striped pada progress bar yang anda buat, untuk contohnya adalah seperti skrip berikut ini :

Semisal kita simpan dengan nama striped_progress_bar.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

• progress bar ditampilkan dengan pola striped, karena kita menambahkan class .progress-bar-striped

 

 

 

Membuat animasi progress bar

setelah di bagian sebelumnya kita telah membuat progress bar yang memiliki pola striped, berikutnya anda juga bisa membuat animasi pada pola striped tersebut, untuk membuat animasi pada progress bar anda cukup menambahkan class .progress-bar-animated, baik untuk contoh skripnya ada sebagai berikut :

Semisal kita simpan dengan nama animasi_progress_bar.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

• terdapat animasi dalam progress bar, karena kita menambahkan class progress_bar_animated

 

 

 

Multiple progress bar

dalam bagian kita akan belajar untuk membuat multiple  progress bar, untuk memasukkan beberapa value sekaligus kedalam 1 progress bar, baik langsung saja kita perhatikan contoh skripnya :

Semisal kita simpan dengan nama multiple_progress_bar.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

• Progress bar akan dibagi beberapa bagian, dalam contoh ini ada 3 bagian
• untuk membuat multiple progress bar, anda hanya tinggal menuliskan beberapa tag <div> dengan class progress-bar, dan memberikan ukuran width pada attribute style
• bagian 1 ditampilkan dengan ukuran 30%
• bagian 2 ditampilkan dengan ukuran 10%
• bagian 3 ditampilkan dengan ukuran 20%

 

Baik sekian dulu pembahasan mengenai cara membuat progress bar dengan bootstrap, jika ada yang ingin didiskusikan silahkan di kolom komentar, baik sekian dulu sampai jumpa di tutorial bootstrap selanjutnya.