Cara Membuat Progress Bar Dengan jQuery UI

Salah satu kemampuan JQuery UI yang cukup mengesankan adalah mudahnya kita membangun objek hanya dengan menerapkan fungsi pada elemen-elemen yang kita inginkan. Sehingga akan membantu kita dalam modifikasi design blog atau website sesuai dengan keinginan kita. Pada materi jQuery UI ini Saya akan membuat contoh Sederhana dalam penggunaan Jquery UI Progress Bar. Progress bar ini menunjukan progress dari sebuah proses yang sedang berlangsung. Oke yang pertama teman teman harus lakukan adalah Install Jquery UI sebelum kode </head> sebagai berikut

Kemudian membuat design kerangka untuk membuat sebuah progressbar sebagai berikut

Pada code diatas saya membuat sebuah tombol tujuannya ketika tombol itu di klik progress bar akan dijalankan. Tampilannya seperti berikut

Jika sudah kita buat event click dan tentukan nilai valuenya sebagai berikut

Untuk menambah nilai progress barnya saya menggunakan fungsi setInterval() yang akan mengupdate value dari progressbar ini.

Pada aslinya progressbar ini memiliki warna abu-abu tapi teman teman bisa mengubahnya dengan menggunakan CSS. Selector CSS yang digunakan adalah : .ui-progressbar .ui-progressbar-value { property CSS }. Semoga Jelas. Terima Kasih