Animasi Page Loader Keren di blog

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.

1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. 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/AVvXsEhEwH0VO_G8tqIfYHy91tvCGYlrsyv9tBxdTkd_1G6bRCnIz3DiZRfdeBsOposEYBJEHsz4GhPvpcpOvIsuqFQQmaG6MgNK-LyrveK8lkqWKOJT544JTatZsYr3gtOhhUFC3T9tE-xbGHV_/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 ;)