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

3 Oktober 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat