Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Web Design. Kali ini saya akan membahas artikel tentang cara Membuat Animasi Battery Charging Menggunakan Javascript. Untuk ikon baterainya di sini saya menggunakan library dari awesome.

Langkah pertama untuk Membuat Animasi Battery Charging Menggunakan Javascript adalah kita membuat struktur htmlnya terlebih dahulu. Berikut scriptnya ya teman-teman.

Jika sudah, lalu teman-teman masukan link dari awesome icon librarynya di dalam tag head. Berikut link awesomennya.

Jika sudah kita masuk ke langkah ketiga yaitu membuat javascriptnya dan berikut scriptnya ya teman-teman.

Untuk yang gambar kotak-kotak diatas teman-teman ganti dengan script yang ada pada gambar di bawah ini ya teman-teman. Jangan lupa dimulai dari yang paling atas ya teman-teman.

Membuat Animasi Battery Charging Menggunakan Javascript

Nah, lalu langkah terakhir kita buat style cssnya, letakan di dalam head dan berikut scriptnya.

Jika sudah selesai jangan lupa di simpan dengan format htmlnya. Lalu teman-teman bisa langsung dijalankan di browser masing-masing. Maka tampilannya akan seperti pada gambar di bawah ini.

Membuat Animasi Battery Charging Menggunakan Javascript

Dimana ikon ini akan dimulai dengan menampilkan ikon baterai yang kosong. Lalu setelah satu detik ikon diganti dengan ikon baru yang mulai mengisi seperempat dari baterai. Di detik kedua ikon akan berganti lagi dengan ikon baru yang mengisi setengah dari baterai. Dan di detik ketiga ikon akan berganti lagi dengan ikon baru dimana baterai telah terisi tiga perempat dari baterai. Sampai pada detik ke  empat ikon akan berganti dengan ikon baru dimana baterai terisi full. Dan Proses ini diulang setiap lima detik sehingga terlihat baterai sedang diisi. Seperti pada gambar di bawah ini.

Membuat Animasi Battery Charging Menggunakan Javascript

Demikian artikel tentang cara Membuat Animasi Battery Charging Menggunakan Javascript. Sampai ketemu lagi di pembahasan selanjutnya. Semoga bermanfaat dan selamat mencoba ya teman-teman.