Seperti yang sudah saya bahas sebelumnya tentang JQuery UI yang sangat mengesankan dari jquery ui ini adalah kita dapat dengan mudah membangun objek hanya dengan menerapkan fungsi-fungsi pada elemen yang kita inginkan. Dan dengan hadirnya jquery ui ini dapat membantu kita dalam memodifikasi design website sesuai dengan selera atau keinginan kita.
Berikut ini merupakan sebuah contoh penerapan dari Jquery ui dimana dipembahasan kali ini saya akan membahas tentang Cara Membuat Loading Bar dengan Jquery-Ui. Loading bar atau biasa dikenal dengan sebutan progress bar merupakan sebuah tampilan loading atau progress dalam sebuah website. Contoh nya saat kita sedang mendownload atau mengupload sebuah dokumen/file kedalam website maka akan muncul progress bar atau loading bar nya.
Lalu bagaimana cara membuatnya ? mari kita mempraktekannya, pertama jalankan/run text-editor yang teman-teman gunakan kemudian, ketiklah script HTML seperti pada gambar dibawah ini :
Jika sudah simpan, dan langkah selanjutnya teman-teman tambahkan sebuah library jquery serta jquery ui nya. Disini saya menggunakan CDN jadi teman-teman harus terhubung dengan internet. Script kodenya bisa dilihat pada gambar dibawah ini :
Jika sudah dengan librarynya, langkah terakhir teman-teman tambahkan fungsi jquerynya seperti pada gambar dibawah ini :
Jika sudah silahkan teman-teman simpan, dan kalau teman-teman jalankan maka ketika diklik buttonnya akan muncul sebuah loading bar atau progress bar nya. Namun disitu masih default designnya bawaan dari jquery-ui. Dan jika kita ingin mengcostumnya maka teman-teman tinggal menambahkan style cssnya seperti pada gambar dibawah ini :
Dan simpan kembali, lalu refresh maka hasilnya akan menjadi seperti pada gambar dibawah ini :
Bagaimana ? cukup mudah ya teman-teman Cara Membuat Loading Bar dengan Jquery-Ui. Biar lebih jelasnya teman-teman silahkan kunjungi website resminya jquery-ui disana banyak sekali dokumentasi-dokumentasinya dan tinggal di coba saja.
Oke kalau begitu cukup sekian dipembahasan kali ini tentang Cara Membuat Loading Bar dengan Jquery-Ui semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.
Terimakasih