بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
IKON baterai yang akan saya berikan tutorialnya disini adalah berbentuk loading baterai ketika dicharge. Sama seperti bentuk baterai ketika dicharge pada Handphone. Tentu saja dalam hal ini menggunakan penempatan coding CSS3 yang sudah mahfum akan kehandalan membentuk sebuah visual dalam website.
Kalian pasti sering lihat khan ikon pengisian baterai yang ada di HP android kalian. Pasti sering lihat ya, tentu saja karena kita bisa mengetahui masih sisa berapa persen lagi baterai akan segera kita charge lagi. Nah ikoan baterai yang sedang dicharge dengan animasi loading itu yang akan kita bahas bersama dalam tutorial di sore hari ini.
Dalam tutorial kali ini kita akan mempraktekkan kode CSS untuk mewujudkan sebuah bentuk ikon animasi pengisian baterai. Sehingga ketika dilihat nanti tidak ada bedanya sama sekali dengan animasi ikon charge HP yang sesungguhnya.
Baca Juga :
Memang bagus sekali penerapan kode ikon pengisian baterai ini. Karena jarang sekali loading menggunakan style ini, dan rata-rata menggunakan bentuk bulatan melingkar atau malah dengan tulisan loading itu sendiri. Kalau mau mempraktekkan silakan diutak-atik sendiri ya kodenya.
Kita praktekkan saja ya tutorial display kali ini. Sebenarnya gampang saja karena dengan menerapkan CSS pada template blog kita, maka bentuk animasi loading charge HP akan muncul. Langsung saja ya penerapannya ada di tutorial dibawah ini.
Ikon Pengisian Baterai HP dengan Coding Cantik
1. Langsung ke Tema
2. Pilih Sesuaikan : Edit HTML
3. Cari kode ]]></b:skin>
4. Tempelkan kode dibawah ini diatas kode ]]></b:skin> itu tadi
*,*:before,*:after{padding:0;margin:0;box-sizing:border-box;}
body{background-color:#282833;}
.battery{height:110px;width:225px;border:8px solid #ffffff;position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;border-radius:12px;}
.battery:before{content:"";position:absolute;margin:auto;height:55px;width:20px;background-color:#ffffff;right:-25px;top:0;bottom:0;border-radius:0 7px 7px 0;}
.battery:after{content:"";position:absolute;height:80px;width:40px;background-color:#ffffff;margin:auto;top:0;bottom:0;left:10px;border-radius:5px;box-shadow:50px 0 transparent,100px 0 transparent,150px 0 transparent;animation:charge 4s infinite;}
@keyframes charge{22%{box-shadow:50px 0 transparent,100px 0 transparent,150px 0 transparent;}25%{box-shadow:50px 0 #ffffff,100px 0 transparent,150px 0 transparent;}47%{box-shadow:50px 0 #ffffff,100px 0 transparent,150px 0 transparent;}50%{box-shadow:50px 0 #ffffff,100px 0 #ffffff,150px 0 transparent;}72%{box-shadow:50px 0 #ffffff,100px 0 #ffffff,150px 0 transparent;}75%{box-shadow:50px 0 #ffffff,100px 0 #ffffff,150px 0 #ffffff;}95%{box-shadow:50px 0 #ffffff,100px 0 #ffffff,150px 0 #ffffff;}}5. Masuk ke Tata Letak
6. Tempelkan kode dibawah ini didalam Tambah HTML/Javascript disitu ya
<div class="battery"></div>Nah setelah semua dilakukan saatnya lihat pekerjaan kamu. Itulah tutorial membuat animasi loading baterai ketika dicharge. Terima kasih banyak ya yang sudah mampir kesini di artikel Ikon Pengisian Baterai HP dengan Coding Cantik. Sampai jumpa besok lagi. Salam.
