Progress Bar adalah suatu proses yang dapat diukur sejauh mana proses itu sudah berjalan. Untuk contoh dari progress bar kita sering melihatnya jika sedang melakukan copy paste sebuah file atau melakukan upload pada file. Nah kali ini saya akan membuat animasi dari progress bar tersebut pada artikel tentang Cara Membuat Progress Bar Dengan Menggunakan AngularJs.

Langkah pertama Cara Membuat Progress Bar Dengan Menggunakan AngularJs tentu jangan lupa link library angularjs seperti di bawah ini dan letakkan di dalam tag head html.

Lalu kita akan membuat struktur htmlnya seperti pada script di bawah ini.

Struktur html di atas saya sudah siapkan beberapa direktif angularjs yang perlu digunakan, seperti ng-app=”myApp” untuk mengaktifkan angularjs, ng-controller=”myCtrl” untuk menjalankan sebuah controller yang akan saya buat dan ng-click=”load()” untuk menjalankan fungsi load() ketika di klik yang ada di dalam controller.  Untuk progress bar saya buat dengan menggunakan div dengan nama id yaitu myProgress dan untuk progress yang akan berjalan atau melakukan proses dengan yang di tandai dengan warna yaitu div dengan nama id myBar.

Jika sudah kita lanjut untuk membuat style cssnya seperti berikut ini. Agar tampilannya persis seperti sebuah progress bar.

Dan terakhir kita akan membuat fungsi di dalam controller angularjs.

Untuk fungsi load() di atas akan di jalankan ketika melakukan klik pada tombol. Dimana di dalamnya aka nada fungsi lagi yang mengecek nilai dari count. Jika di bawah 100 maka count akan di tambahkan satu seterusnya dengan menggunakan interval yang memiliki durasi 500 milisecond. Nilai count ini akan saya manfaatkan untuk memberikan lebar pada div id myBar yang sudah saya berikan background warna.

Jika teman-teman buka di browser maka tampilannya akan seperti pada gambar di bawah ini.

Cara Membuat Progress Bar Dengan Menggunakan AngularJs

Demikian artikel tentang Cara Membuat Progress Bar Dengan Menggunakan AngularJs . Semoga dapat bermanfaat dan selamat mencoba.