jadi pada artikel kali ini kita akan coba membuat progress bar, sebelumnya teman-teman tau ya, dah sudah pernah melihat minimal, tetapi untuk sekarang saya yakin teman-teman sudah pernah melihat tetapi mungkin belum tau itu adalah sebah progress bar, ya betul progress bar itu seperti ketika kita mengcopy file, mengcut file, biasanya kita di suguhkan sebuah garis, dimana kita harus menunggu 100% supaya copy / cut selesai, oke apa saya yang kita butuhkan untuk belajar cara membuat progress bar bootstrap 4 dengan javascript, simak terus ya teman-teman.

cara membuat progress bar bootstrap 4 dengan javascript disini saya menggunakan tampilan dengan bootstrap 4 ya, supaya tampilan progress barnya lebih menarik dan cantik, dan untuk kasus kita kali ini jadi saya sudah menyiapkan struktur HTML seperti:

  • input type range untuk mengatur tampilan progress barnya akan di tampilkan berapa persen
  • dan tentunya progress bar itu sendiri,
  • dan nanti kita akan menggunakan event change pada input type range supaya valuenya berubah-rubah dan di masukan kedalam progressnya.

oke langsung saja kita lihat cara membuatnya ya, silahkan teman-teman tulis struktur dan kodenya seperti ini:

jika sudah silahkan teman-teman coba, dan disini saya akan mencoba menggeser input type rangenya ke tengah di mana berarti kita mencoba memberika value sekita 50% ya, seperti ini tampilannya:

cara membuat progress bar bootstrap 4 dengan javascript

bagaimana apakah punya teman-teman sudah berhasil tampil seperti punya saya di atas, dan contoh di atas saya juga menambahkan sedikit ya, jadi ketika progress bar sudah mencapai 100% maka warna progress bar itu sendiri akan berwarna hijau.

dan untuk meliat livenya teman-teman bisa lihat disini:

klik disini yRZYzM by bento (@masbeni) on CodePen.

bagaimana cukup simple ya, dan saya rasa cukup sampai disini belajar kita tentang cara membuat progress bar bootstrap 4 dengan javascript, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.

 

WhatsApp chat