Animasi Loading Blog. Ok sobat berikut ini seocips akan membagikan lagi tutorial seputar memasang efek animasi loading di Blogger, sebelumnya juga mengenai efek loading blog sudah pernah dibagikan cara membuat efek loading dengan keyframe (sliding, Quake dan Bounce) dan efek Pulse loading Animation yang tidak kalah kerennya.

Beberapa sobat blogger memasang efek loading blog ini untuk mempercantik tampilan blog atau juga daripada waktu loading page (ketika halaman dimuat) tidak terjadi apa-apa kan bagus juga jika ada animasinya, atau juga karena halaman blog yang lumayan lama di load.

Cara Membuat Animasi Loading Blog Lingkaran

ANIMASI LOADING 1 (MERAH)

Langkah 1. Tambahkan kode dibawah ini di atas ]]></b:skin> atau kedalam css template blog. Intinya ada di dalam CSS template.
#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}
Langkah 2. Letakan kode jQuery dibawah ini diatas kode </head> . Kalau sudah ada, tidak perlu di tambahakan lagi atau ganti dengan kode jQuery terbaru.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
Langkah 3. Letakkan kode dibawah ini diatas kode </body>
<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>
<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
});
// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
$('#loadhalaman').click(function() {
$(this).hide();
});
});
</script>
 Langkah 4. Save dan lihat hasilnya.

ANIMASI LOADING 2 (BIRU)

Cara menggunakannya sama saja seperti diatas hanya CSS nya yang diganti.
.ball { 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; }
.ball1 { 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); }
Langkah selanjutnya sama seperti langkah 2,3 dan 4 pada animasi loading Blog warna merah di atas.

OK, semoga tutorial cara membuat efek loading animasi di blog ini bermanfaat dan jangan lupa lihat artikel terbaru seocips yang lainnya.
7 Komentar untuk "Cara Membuat Animasi Loading Blog Lingkaran di Blogger"

keren gan,, ane nyoba dulu .. :mrgreen:

thenk`s infonya gan sangat berguna

Gan ada ngga yang animasinya kaya loading windows 8.

Saya belum pernah lihat gan animasi loading windows 8 kayak gimana, ;-( ane masih pakai windows 7, kompi ane juga udah jadul banget, ;((

mantap nih, bookmark dulu aja..makasih mas :d