Car Membuat Animasi Loading Blog Lingkaran
Efek Animasi Loading Blog. Ok sobat berikut ini seocips akan membagikan lagi tutorial seputar memsang efek animasi di blog, sebelumnya juga mengenai efek Loading blog telah di jelaskan di  menambahkan efek loading dengan keyframe ( sliding,  Quake, Baunce ) dan efek loading animasi dengan gambar yang dapat kita pilih sendiri.

Mungkin beberapa sobat blogger memilih memasang efek loading blog ini karena memiliki alasan masing-masing misalnya untuk mempercantik blog atau juga daripada waktu loading page tidak terjadi apa-apa kan bagus juga jika animasinya.

Ok sobat langsung saja berikut ini adalah Cara Membuat Animasi Loading Blog Lingkaran.

LIVE DEMO:

Demo dengan Animasi berwarna Merah

Demo dengan Animasi berwarna Biru



1. ANIMASI LOADING BERWARNA MERAH

Langkah 1. Tambahkan kode dibawah ini di atas ]]></b:skin> atau kedalam css template anda, tergantung karena tiap template berbeda. 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. Kemudian lanjutkan dengan meletakan kode dibawah ini diatas kode </head> . Kalau sudah ada tidak perlu di tambahakan lagi.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
Langkah 3. Kemudian lanjutkan ke langkah terakhir dengan meletakan 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>

2. ANIMASI LOADING BLOG BERWARNA BIRU.

Cara menggunakannya sama saja seperti diatas hanya CSSnya 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); }
}
Untuk langkah selanjutnya sama seperti Langkah 1 dan Langkah 2 pada animasi Loading Blog Berwarnah merah di atas.

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

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