Membuat Progress Bar dengan Bootstrap 4

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

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

Hasilnya :

 

2. Progress bar dengan pesentase

Beikut adalah cara menambahkan presentase pada progress bar dengan teks. Berikut adalah contohnya

Hasilnya :

 

3. Progress bar Height

Kita juga bisa menentukan tinggi atau besar progress bar, caranya adalah sebagai berikut :

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 :

Hasilnya :

 

5. Multiple Progress bar

Pada progressbar ini kita bisa memberikan beberapa warna sekaligus pada progressbarnya, caranya yaitu :

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

Hasilnya :

 

7. Progressbar dengan animasi

Pada progressbar stripped, kita bisa membuat animasinya. Animasi ini akan menjadikan garis seperti berjalan, berikut adalah cara penulisannya :

Hasilnya :

 

8. Menjalankan Progressbar dengan javascript

Untuk menjalankan progressbar kita memerlukan script dari javascript. Pertama kita membuat progressbarnya seperti dibawah

Kemudian pada tag <body> paling bawah kita tuliskan script dibawah

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 :

Sampai jumpa pada postingan saya selanjutnya..

 

One thought on “Membuat Progress Bar dengan Bootstrap 4

Leave a Reply

Your email address will not be published. Required fields are marked *

19 − 8 =