Skill bar sering kita temui pada portofolio website untuk menunjukan tingkat kemampuan pemilik website tersebut dan kebanyakan itu di pakai oleh freelancer supaya menarik pelanggan untuk memakai jasanya. Nah saya pernah membahas cara pembuatrannya menggunakan jQuery, namun sekarang saya akan mencoba membahasnya Cara Membuat Skill Bar Menggunakan jQuery UI.

Apa itu jQuery UI? JQuery UI adalah kumpulan antarmuka pengguna, efek, widget, dan tema yang dikurasi yang dibangun di atas javascript perpustakaan jQuery dan di buat khusus untuk pengembangan di bagian user interface atau bagian front-end nya. Pada tutorial kali ini saya akan mencoba membagi Cara Membuat Skill Bar Menggunakan jQuery UI. Berikut langkah-langkah pembuatan skill bar-nya:

– Langkah Pertama

Teman-teman download dulu file jQueryUI nya di situs resmi jQueryUI dan di sini saya menggunakan versi jquery-ui-1.12.1, lalu buat file index.html yang di dalamnya teman-teman ketikan kode di bawah ini, untuk link ke jQuery dan jQuery UI nya itu sendiri.

– Langkah Ke dua

Buat tag html di bawah ini

Dimana id progress 1, 2, dan 3 di buat untuk menampilkan hasil dari value yang akan kita masukan di langkah ke tiga

– Langkah Ke tiga

Masukan script di bawah ini untuk membuat progressnya dan jangan lupa kita ubah warna background progressnya

– Langkah Ke empat

Coba teman-teman buka di browser teman-teman maka tampilannya akan menjadi gambar di bawah ini

Cara Membuat Skill Bar Menggunakan jQuery UI

Bagaimana teman-teman cukup mudah kan menggunakan jQuery UI untuk membuat skill bar. Sekian tutorial kali ini tentang Cara Membuat Skill Bar Menggunakan jQuery UI.