Membuat Efek Animasi Loading Sederhana dengan jQuery · Bagian 1
Masalah yang biasanya sulit dipecahkan adalah tentang cara menyeleksi elemen berupa tautan internal. Sampai beberapa saat yang lalu Saya menemukan ini.
Berikut ini adalah langkah singkat untuk membuatnya:
Salin kode CSS ini, letakkan di atas kode ]]></b:skin>
atau </style>
:
#page-loader {
position:fixed;
top:0;
left:0;
background-color:#fff;
z-index:9999;
text-align:center;
width:100%;
height:100%;
padding-top:70px;
font:bold 50px Calibri,Arial,Sans-Serif;
color:#000;
display:none;
}
Kemudian tambahkan kode ini di atas </body>
:
<div id='page-loader'>Loading...</div>
Setelah itu buat fungsi jQuery sederhana dengan bantuan script untuk menemukan link internal:
$(function() {
var siteURL = "//" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
$internalLinks.click(function() {
$('#page-loader').fadeIn(1500).delay(6000).fadeOut(1000);
});
// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
$('#page-loader').click(function() {
$(this).hide();
});
});
Letakkan script tersebut di atas kode </head>
Klik simpan dan coba muat ulang halaman blogmu, kemudian coba klik salah satu tautan internal di dalam blogmu dan lihat apa yang akan terjadi...
Tambahan:
Jika Anda pemakai jQuery versi di bawah 1.4.0, Anda harus menambahkan plugin delay sebelum menjalankan fungsi .delay()
karena fungsi .delay()
pada jQuery hanya terdapat pada jQuery versi 1.4 dan di atasnya:
Plugin Delay untuk jQuery versi 1.4-
$.fn.delay = function(time, callback) {
// Empty function:
jQuery.fx.step.delay = function(){};
// Return meaningless animation, (will be added to queue)
return this.animate({delay:1}, time, callback);
}
35 Comments:
makasih mas taufik atas trik2 nya :)
Assalamualaikum Bismillah Alhamdulillah | Mas kalau cara buat efek loading waktu pengunjung meninggalkan blog kita/klik link external bagaimana ya seperti link di "Pembaharuan" di blog kmu...?
Alhamdulillah Wassalamualaikum.
@The7Bloggers Hehe... itu link internal kok. Jadi cara bikinnya ya sama persis sama yang ini.
@Taufik NurrohmanAssalamualaikum Bismillah Alhamdulillah | Owh apa ada bedanya mas...?, Oy mas blog aku sudah aku pasang thread koment, Di cek ya mas....? | Alhamdulillah Wassalamualaikum.
Ane dah coba ke tkp gan, n hasilnya perfect.
tp ane mw gabungin tulisan sama efek yg ke dua gmana ya gan, kn efek yg diatas kalo digabungin tulisan loading nya duluan baru efek sinarnya keluar, kalo digabungin jadi satu gmana caranya gan.
Mohon Pencerahannya :)
@Rofick Achmad ??? Hmmmmhhhh... =p*
klo untuk jquery 1.7.1 ada tambahan jquery ga?
@Sadeva Aldy Pratama Nggak. JQuery 1.7.1 itu baru keluaran kemarin-kemarin. Sekarang malah sudah ada versi 1.7.2
kalo diubah jadi gambar animasi gimana mas ?
@Hayley Sdnan Coba tebakkkk!!!
@Taufik Nurrohman kaya gini ?
< d_i_v id='page-loader'>
ngasal :D :D :D :D
*Your HTML cannot be accepted: Tag is not allowed: DIV <--- ~x(
@Sidnan09
hedeh ini kenapa gak bisa nampilin code html div sma img -_-"
kamsud nya ditengah tag page-loader tdi dikasih ini ?
:'( :'( :'(
tetep kagak mau nampilin kode x@
@Sidnan09 Dikonversi dulu kode HTML-nya :) Kalau mau memberikan dekorasi gambar pada animasi loading, bisa cukup pakai background-image:
#page-loader {
background:black url('img/loading.gif') no-repeat center center;
}
Kak, setelah aku terapkan pada blog aku jika link di set target='_blank kok tetep loading, kira-kira salahnya dimana ya ?
mohon pencerahannya, tak utak-utik tetep aja nih... ?
Mas mau nanya nih, kalo make jquery yg di atas kan itu jadinya waktu link internal di klik background jadi putih. Trus kalo nampilin kan tergantung nilai fadeIn , delay ama FadeOut.
Nah mauku itu background ilang kalo udah halaman udah selesai dimuat, itugimana mas caranya?
Btw thanks buat tutornya.
Gabungkan dengan yang ke dua
nah itu mas,,,dar tadi aku juga udah gabungin make yg itu mas,, tp gagal terus mas. Masih baru mas mainan jquery.
Kak, setelah aku terapkan pada blog aku jika link di set target='_blank kok tetep loading, kira-kira salahnya dimana ya ?
mohon pencerahannya, tak utak-utik tetep aja nih... ?
jika masih bingung coba cara berikut kak =
1. Letakkan code berikut di atas ]]></b:skin>
#page-loader {
position:fixed;
top:0;
left:0;
background-color:#010101;
z-index:9999;
text-align:center;
width:100%;
height:100%;
padding-top:70px;
font:bold 50px Calibri,Arial,Sans-Serif;
color:#000;
display:none;
}
.sagita {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spin .5s infinite linear;
-webkit-animation:spin .5s infinite linear;
}
.page-sagita {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #2187e7;
width:30px;
height:30px;
margin:0 auto;
position:relative;
top:-50px;
-moz-animation:spinoff .5s infinite linear;
-webkit-animation:spinoff .5s infinite linear;
}
@-moz-keyframes spin {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(-360deg); }
}
2. letakkan code berikut diatas </head>
<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
$internalLinks.click(function() {
$('#page-loader').fadeIn(1500).delay(6000).fadeOut(1000);
});
// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
$('#page-loader').click(function() {
$(this).hide();
});
});
</script>
3. Letakkan code berikut diatas </body>
<div id='page-loader'><div class='sagita'></div><div class='page-sagita'></div></div>
4. Simpan template Anda.
Semoga membantu ya kak !
Nambah :
Untuk merubah posisinya set pada :
padding-top:70px;
menjadi :
padding:300px 0 0;
kalo make yg itu saya udah bisa,, nah mauku kan itu animasi loadingnya ilang pas halaman udah selesai dimuat.
Kata mas Taufik suruh gabungin sama yang ini
$(window).bind("load", function() {
...
});
tapi tetep gak mau, salah nempatin kodenya mungkin.
jadi intinya waktu url internal diklik,
.fadeIn jalan.
nah pas document selesai dimuat
.fadeOut baru jalan.
Benar begitu apa bukan, kalo iya jquerynya jd gimana?
mas, aku pake jquey latest, yang sekang 1.8.2, ini bisa dipake ga mas?
// Bagian satu:
$internalLinks.click(function() {
...
});
// Bagian dua:
$(window).on("load", function() {
...
});
Sekarang disarankan kita tidak lagi memakai event .bind() tetapi .on()
Coba difilter:
$internalLinks.filter(':not([target="_blank"])')click(function() {
...
});
Bisa. Dan memang disarankan untuk menggunakan versi yang terakhir.
Udah berhasil kak, makasih banget ya ?
mas, aku mau nanya nih kalo untuk implementasinya pada saat "publish" komentar bisa ga dengan menggunakan efek animasi yang sama dengan yang diterapkan ke halaman blog nya?terima kasih yah sebelumnya...
Kalau memakai metode animasi loading dengan event beforeunload setahu Saya bisa ⇒ /2013/01/efek-animasi-loading-dengan-event.html
Jadi, animasinya akan dimulai ketika redirect setelah mempublikasikan komentar.
tp mas kalo menggunakan efek yg beforeunload saat saya sisipkan kode untuk membuat css loading bar gitu untuk mengganti tulisan "Loading" nya kok ga work yah??? kemarin saya terapin yg menggunakan jquery ini baru bisa...
CSS yang ini sudah dicoba? ⇒ /2013/01/efek-animasi-loading-dengan-event.html?showComment=1358518741306#c8005670485318104370
URL gambarnya nanti diganti dengan URL gambar sendiri. Atau jiplak saja CSS yang ada di halaman demo, yang #page-loader saja.
saya ga gunain image mas, tp pake css juga dan efek loadingnya dengan tutorial yg ini sehingga kode html nya disisipin mjd seperti ini : <div id='page-loader'>
<div class='loading'>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
sedangkan menggunakan yg beforeunload ga bs disisipi ya mas? shg yg muncul hanya tulisan "Loading..." gitu.
hmm, mas setelah saya coba2 menggunakan yang beforeunload lalu saya hapus kode .append('<div id="page-loader">Loading...</div>') loading bar nya muncul tapi saat publish komentar efek loading nya terpicu pada halaman blog bukan pada komentar nya...
agar efek nya bukan pada halaman blog hanya pada saat mempublish komentar bagaimana ya mas??
Oh, iya. Kalau elemen #page-loader sudah ada, kode .append('<div id="page-loader"></div>') tidak perlu ditambahkan, soalnya nanti elemen #page-loader malah jadi dua, itu yang membuat rusak.
agar efek nya bukan pada halaman blog, hanya pada saat mempublish komentar bagaimana ya mas??
Tidak bisa. Kalaupun ada caranya, kode animasi loading itu harus dimasukkan ke dalam formulir komentar. Jadi tetap tidak akan bisa. Memicu event beforeunload ke iframe juga tetap tidak bisa:
$('#comment-editor').on("beforeunload", function() {});
oh, begitu mas ok kalo gitu terima kasih banyak atas jawaban2nya ya mas...
Post a Comment
<< Home