Pada saat ini, kita sudah sering menjumpai animasi pada suatu website atau blog.
Animasi merupakan salah satu cara untuk menarik perhatian pengunjung agar mereka melihat konten yang dianimasikan tersebut , biasanya iklan.
berkat animasi juga, suatu website akan terlihat lebih profesional di mata pengunjung.
kali ini kita akan membuat animasi loading murni menggunakan javascript, tanpa menggunakan jquery.
alur programnya seperti berikut:
ketika kita mengklik tombol download:
- Simpan besar file dan panjang elemen loading ke dalam variabel.
- Persetiap 10 ms (milisecond atau 1/100 detik) panjang loading ditambah 1px dan angkanya ditambah satu.
- Jika angkanya sudah mencapai 1000 hentikan penghitungan dan ganti angkanya menjadi "Download Completed".
Ok, berikut ini kodenya.
index.html
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="css/style.css"/> <script src="js/script.js"></script> </head> <body> <header> <h1>Animasi Loading</h1> </header> <div id="main"> <input type="button" id="tombol" onclick="download()" value="Download"/><br/> <span id="angka">0</span><span id="persen"> MB</span> <div id="background"> <div id="loading"></div> </div> </div> </body> </html>
style.css
* {
margin:0;
padding:0;
}
body {
background:#f0fff0;
}
header {
height:60px;
background:#2f4f4f;
color:white;
}
header h1 {
text-align:center;
padding-top:5px;
}
#kembali {
width:60px;
height:60px;
position:fixed;
right:10px;
bottom:10px;
border-radius:30px;
background:#2f4f4f;
}
#kembali:hover {
background:#7cfc00;
}
#kembali:hover #icon{
color:#4b0082;
}
#icon {
color:#7cfc00;
font-size:50px;
margin-left:10px;
}
#main {
text-align:center;
}
#tombol {
margin-top:200px;
}
#background {
width:1000px;
height:50px;
border:1px solid black;
border-radius:5px;
margin-top:10px;
margin-left:183px;
overflow:hidden;
}
#loading {
width:0;
background:#00ff00;
height:50px;
}
script.js
a=1;
z=1;
y=1000;
function download(){
load=document.getElementById('loading');
angka=document.getElementById('angka');
persen=document.getElementById('persen');
number=parseInt(angka.innerHTML);
load.style.width=y;
x=angka.innerHTML=number+a;
y=setTimeout("download()",10);
if(x>=1000){
clearTimeout(y);
angka.innerHTML="Download Completed";
persen.innerHTML="";
}
}
Kesimpulan
Animasi di atas hanya animasi loading biasa, tanpa bisa menghitung proses loading download yang sebenarnya.
Anda bisa mengedit kodenya dan memberi fungsi agar animasinya tidak hanya sekedar animasi biasa, tetapi juga dapat digunakan untuk menghitung proses download yang sebenarnya.
Terima Kasih!
0 komentar:
Posting Komentar