Scholovers Blogger | kali ini admin akan membahas Animasi Page Loader Keren di blog. Animasi Page Loader Keren ini memberikan efek loading animasi Circle keyframes kurang lebih seperti pada gambar berikut.
Baiklah jika sobat tertarik untuk memasangnya, maka silahkan ikuti langkah-langkah berikut.
4. Selanjutnya Masukkan kode javascript berikut diatas </body>.
Note: kode bewarna merah bisa sobat ganti dengan gambar yang diinginkan
5. Simpan Template dan Selesai.
Semoga Berhasil ;)
Baiklah jika sobat tertarik untuk memasangnya, maka silahkan ikuti langkah-langkah berikut.
- Login blogger
- Rancangan, Edit Html, Cari kode ]]></b:skin>
- Dan Simpan kode berikut diatasnya :
/* PageLoader V2*/
#pageLoadaka {
position: fixed;top:0;left:0;background-color:rgba(5,5,5,0.9);z-index: 9999;text-align:center;
width:100%;height:100%;padding-top:22%;font-size:25px;color:#fff;display:none;}
.loader {
background-color:rgba(0,0,0,0);
border:5px solid #fff;
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:60px;
box-shadow:0 0 35px #fff;-moz-box-shadow:0 0 35px #fff;-webkit-box-shadow:0 0 35px #fff;
width:100px;
height:100px;
margin:0 auto;
-moz-animation:berputar 1s infinite ease-in-out;
-webkit-animation:berputar 1s infinite linear;
}
.loader3 {
background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitlIItDBjkDQT2bJnA8YqzBQ7s3j_4JaAaoKoxwGu2pfC1PCCD-qUS5UjHEIHs4uRXV_QIYfLKuavBY4-ALxGj83C2aE7sExJGeTVm1MopL4mFTh8Cf-8MhYmuyghXyqZ2Vt-Mcly-txLb/s1600/cyrle.png) no-repeat center;
background-repeat: no-repeat
border:1px solid #fff;
opacity:.9;
border-radius:45px;
box-shadow:0 0 35px #fff;-moz-box-shadow:0 0 35px #fff;-webkit-box-shadow:0 0 35px #fff;
width:70px;
height:70px;
margin:0 auto;
position:relative;
top:-181px;
}
.loader2 {
background-color: rgba(0,0,0,0);
border:5px solid #fff;
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:45px;
box-shadow:0 0 35px #fff;-moz-box-shadow:0 0 35px #fff;-webkit-box-shadow:0 0 35px #fff;
width:80px;
height:80px;
margin:0 auto;
position:relative;
top:-100px;
animation:berputarkecil 1s infinite linear;
-moz-animation:berputarkecil 1s infinite linear;
-webkit-animation:berputarkecil 1s infinite linear;
}
@-moz-keyframes berputar {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #fff;}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes berputarkecil {
0% { -moz-transform:rotate(360deg); }
100% { -moz-transform:rotate(0deg); }
}
@-webkit-keyframes berputar {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #fff; }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes berputarkecil{
0% { -webkit-transform:rotate(360deg); }
100% { -webkit-transform:rotate(0deg); }
}
4. Selanjutnya Masukkan kode javascript berikut diatas </body>.
<!-- Start pageloader -->
<div id='pageLoadaka'>
<div class='loader'/>
<div class='loader2'/>
<div class='loader3'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
$internalLinks.click(function() {
$('#pageLoadaka').fadeIn(500).delay(2000).fadeOut(1200);
});
$('#pageLoadaka').click(function() {
$(this).hide();
});
});
//]]>
</script>
<!-- End pageloader -->
Note: kode bewarna merah bisa sobat ganti dengan gambar yang diinginkan
5. Simpan Template dan Selesai.
Semoga Berhasil ;)
Comments
Post a Comment
Syarat-syarat Berkomentar:
☻) Berkomentarlah Dengan Bahasa Yang Sopan;
☻) Berkomentarlah Dengan Bijak;
☻) Berkomentarlah Dengan Komentar Yang Berhubungan Dengan Postingan Ini;
☻) Dilarang Berkomentar Yang Berhunbungan Dengan PORNO/SARA
☻) Dilarang Berkomentar SPAM
NB: Jika sahabat melanggar syarat-syarat diatas maka Komentar sahabat akan dihapus.
Terima Kasih.