Pair of Vintage Old School Fru
Home » Article » Jquery » Membuat Animasi Loading Dan Progressbar Dengan Jquery

Membuat animasi Loading dan Progressbar dengan jQuery

f_huda19   15 Juni 2015   18:42:21   0 Suka   Favorit

Memiliki blog yg atraktif merupakan dambaan setiap orang, salah satunya dengan memasang widget-widget pendukung yg tujuannya untuk mempercantik tampilan blog supaya pengunjung betah berlama-lama di blog kesayangan kita.


OK Sobat, kali ini blog Cyber4rt.wapsite.me hadir kembali dengan tutorial Membuat animasi Loading dan Progressbar dengan jQuery. Tentu sudah tidak asing lagi kan jika dengar kata itu? Tapi jangan kabur dulu sob! Seperti biasa, ane akan membuat pembaharuan supaya lebih ringkas dan tidak sama persis dengan yg sudah ada di blog tetangga. Buat apa posting panjang lebar tapi script-nya sudah pasaran di mesin pencari. Iya ngga sob?

Nah, jika sobat sudah mulai bosan dengan tampilan loading yg begitu-begitu saja alangkah baiknya jika sobat melirik postingan ini, kan bagus tuh sambil menunggu blog selesai di muat ada animasi loading yg lucu-lucu gitu. Itung-itung buat hiburan saat koneksi Internet sedang tidak stabil sob! hhe..

Mungkin sobat akan bertanya. Apakah dapat mempengaruhi peforma loading blog? Kalau itu sih tergantung blog milik sobat, kalau emang loadingnya tidak berat mau dikasih animasi loading juga tidak masalah.. Pada dasarnya animasi loading itu menggunakan Event .load() Bukan hanya DOM selesai di muat, tapi setelah iframe gambar dan sejenisnya sudah komplit barulah Event .load() akan bekerja.

Oke langsung saja kita praktekkan cara membuatnya. Pertama kita memerlukan sebuah plugin jQuery seperti ini: <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> terserah mau pasang dimana, asal jangan di jidat aja, hhe.. Jika sudah ada abaikan saja, lanjutkan pasang script ini di bawahnya.

<script type="text/javascript">
$(document).ready(function() {
$("#hidden").css('display', 'block');
$("#progress-bar").animate({width:"65%"}, 2000); });
$(window).bind('load', function() {
$("#progress-bar").stop().animate({width:"100%"}, 1000, function() {
$("#hidden").fadeOut(3000); }); });
</script>

Jika sudah selesai kita buat css seperti contoh dibawah, letakkan di dalam tag head. URL gambar silahkan di ganti.

<style type="text/css">
#hidden {display:none}
#progress-bar {position:fixed;z-index:9999;top:0;left:0;width:0;height:2px;background-color:#4aa6e7}
#loading {position:fixed;z-index:999;top:0;left:0;width:100%;height:100%;background:#000 url(url-gambar-loading.gif) center no-repeat}
</style>

Yang terakhir adalah tag HTML nya. Misalkan script di atas disimpan dengan nama "loading.js" dan "style.css".

<html><head>
<title>Membuat animasi Loading dan Progressbar dengan jQuery</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all,handheld" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="loading.js"></script>
</head><body>
<div id="hidden">
<div id="progress-bar"></div><div id="loading"></div>
</div>

<!-- konten situs anda -->

</body></html>

Selesai. Jika kita perhatikan tag HTML diatas ID loading dan progress-bar di bungkus oleh <div id="hidden"></div> Itu berfungsi untuk menghindari browser yg tidak support javascript supaya animasi loading tidak menutupi halaman. Untuk melihat demonya silahkan klik link di bawah ini.

DEMO

Script diatas adalah contoh sederhana dari "Membuat animasi Loading dan Progressbar dengan jQuery". Tentu sobat dapat membuat yg lebih menarik dan atraktif misalnya dengan menambah teks, waktu muat dan sebagainya. Sekian untuk postingan kali ini, tunggu artikel menarik seputar jQuery lainnya hanya di Cyber4rt.wapsite.me.

KOMENTAR

suarnaya

suarnaya 18 Jun 15

sob kok saya gak bisa lihat kodenya secara keseluruhan,

f_huda19

Admin 18 Jun 15

pakai browser apa sob? kalau di hp java biasanya ada whitespace-nya, kalau di smartphone atau PC memang terpotong, tapi bisa digeser kesamping kanan atau kiri

Kcaturmulakene

Kcaturmulakene 29 Jun 15

Kunjungi gubuk ane juga sob http://webslovestory.xtgem.com

mhjghcvg

mhjghcvg 30 Aug 15

mksh

ga jalan

ga jalan 18 May 16

ga jalan

f_huda19

Admin 16 Jun 16

coba dicek demonya om

Quick Loan

Quick Loan 29 Mar 18

instant loans online <a href="http://loansonline.trade">loans online</a> online payday loans <a href=http://loansonline.trade>payday wiki</a>

Pay Day Loan

Pay Day Loan 30 Mar 18

online loans <a href="http://loansonline.trade">loans online</a> best online payday loans <a href=http://loansonline.trade>personal loans online</a>

Easy Payday Loan

Easy Payday Loan 31 Mar 18

online payday loans <a href="http://loansonline.trade">loans online</a> loans online <a href=http://loansonline.trade>loans online</a>

Loans

Loans 01 Apr 18

loans online <a href="http://loansonline.trade">online payday loans</a> loans online <a href=http://loansonline.trade>speedy cash payday loans online</a>

AufrmDraip

AufrmDraip 19 Apr 18

https://onlinecasino.gb.net/# - online casinos
<a href="https://onlinecasino.gb.net/#">online casinos</a>
<a href=" https://onlinecasino.gb.net/# ">casino online</a>

Judi

Judi 11 May 18

hl7qf9 https://www.genericpharmacydrug.com