Mecha versi 2.6.4 sudah dirilis!

Membuat Efek Animasi Loading Sederhana dengan jQuery · Bagian 1

Tabel Konten
  1. Tambahan: 
    1. Plugin Delay untuk jQuery versi 1.4- 
Loading Bar

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...

Lihat Demo

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);
}
Berikutnya: Membuat Efek Animasi Loading dengan jQuery - Bagian 2

35 Komentar

Unknown

makasih mas taufik atas trik2 nya :)

Anonim

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.

Taufik Nurrohman

@The7Bloggers Hehe... itu link internal kok. Jadi cara bikinnya ya sama persis sama yang ini.

IRIL SAGITA

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... ?

Anonim

@Taufik NurrohmanAssalamualaikum Bismillah Alhamdulillah | Owh apa ada bedanya mas...?, Oy mas blog aku sudah aku pasang thread koment, Di cek ya mas....? | Alhamdulillah Wassalamualaikum.

Unknown

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 :)

Aldy

klo untuk jquery 1.7.1 ada tambahan jquery ga?

Taufik Nurrohman

@Sadeva Aldy Pratama Nggak. JQuery 1.7.1 itu baru keluaran kemarin-kemarin. Sekarang malah sudah ada versi 1.7.2

Unknown

mas, aku pake jquey latest, yang sekang 1.8.2, ini bisa dipake ga mas?

Taufik Nurrohman

Bisa. Dan memang disarankan untuk menggunakan versi yang terakhir.

Unknown

kalo diubah jadi gambar animasi gimana mas ?

Unknown

@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(

Unknown

@Sidnan09
hedeh ini kenapa gak bisa nampilin code html div sma img -_-"
kamsud nya ditengah tag page-loader tdi dikasih ini ?

Unknown

:'( :'( :'(
tetep kagak mau nampilin kode x@

Taufik Nurrohman

@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;
}

Unknown

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.

Taufik Nurrohman

Gabungkan dengan yang ke dua

Unknown

nah itu mas,,,dar tadi aku juga udah gabungin make yg itu mas,, tp gagal terus mas. Masih baru mas mainan jquery.

Unknown

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 !

Unknown

Nambah :

Untuk merubah posisinya set pada :

padding-top:70px;

menjadi :

padding:300px 0 0;

Unknown

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?

Taufik Nurrohman

// Bagian satu:
$internalLinks.click(function() {
...
});
// Bagian dua:
$(window).on("load", function() {
...
});

Sekarang disarankan kita tidak lagi memakai event .bind() tetapi .on()

Unknown

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... ?

Taufik Nurrohman

Coba difilter:

$internalLinks.filter(':not([target="_blank"])')click(function() {
...
});

Unknown

Udah berhasil kak, makasih banget ya ?

Unknown

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...

Taufik Nurrohman

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.

Unknown

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...

Taufik Nurrohman

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.

Unknown

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.

Unknown

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??

Taufik Nurrohman

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() {});

Komentar telah ditutup.