Membuat Animasi Download Link Generator Menggunakan jQuery

Pernahkah anda melihat situs-situs download manager seperti indowebster, 4shared, dan kawan-kawan yang menggunakan animasi untuk mendownload file apa saja dan anda diharuskan untuk menunggu beberapa detik sebelum link download dibuat atau dimulai. Ya, itulah yang mungkin disebut dengan Link Generator versi saya dalam konteks Animasi Download Button menggunakan jQuery.

Disini saya akan berbagi tutorial mengenai cara membuat link-link download seperti pada contoh situs download manager diatas dengan menggunakan jQuery tentunya. Karena efek yang terlihat akan lebih smooth alias halus dan elegan.

Demo Membuat Animasi Download Link Generator dengan waktu tunggu 10 detik


  • Animasi diatas menggunakan jQuery, install terlebih dahulu jQuery pada website anda dengan cara meletakkan kode berikut ke dalam tag <head> website anda. Jika sudah ada, dapat melewati opsi ini
    • <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
  • Langkah kedua membuat target class atau id html yang akan dianimasikan. Dalam contoh ini target adalah tag input[type="button"] yang memiliki class ".btndownload". Jangan lupa attribut disabled=true untuk disertakan, fungsinya untuk mematikan fungsi aksi dari button
    • <input type="button" class="btndownload" value="Please Wait ..." disabled="true" />
  • Lalu buatlah style/CSS class ".btndownload" untuk mempercantik tampilan dari button
    • input[type="button"]{
	background-color:#009afd;
	color:#fff;
	padding:7px;
	border:1px solid #1777b7;
	cursor:pointer;
	box-shadow:0 1px 0 rgba(255,255,255,0.3) inset,0 1px 1px rgba(100,100,100,0.3);
}
input[type="button"]:hover{
	background-color:#07c;
}
input[type="button"]:disabled{
	color:#ddd;
	background-color:#07c;
	cursor:wait;
}
  • Lalu langkah terakhir dengan membuat script jQuery
    • $(document).ready(function(){
        var count=8; //detik (counter)
	var btn=$(".btndownload"); //Button (target yang dianimasikan)
        var second=count*1000;
	var counter=setInterval(timer, 1000);		
        function timer(){		
		count=count-1;
		if (count <= 0){
			clearInterval(counter);
			return;
		}
         btn.attr({ disabled:true, value:"Generate download link in " + (count) + " seconds..." }); // watch for spelling
         btn.blur();
				
	setTimeout(function(){
		btn.attr({ disabled:false, value:"Download" });
		btn.blur();
		}, second);
        }
});
  • Selesai. Kode selengkapnya dapat anda download dibawah

Download source code :

Membuat Animasi Download Link Generator Menggunakan jQuery [Size: 32.27KB]

Baca Juga :

Older Post
Newer Post