Pasang Efek Animasi "Page Loader" Halaman Vol.2

Baiklah kali ini saya kembali lagi untuk memberikan trik blogger yaitu cara 'Pasang Efek Animasi "Page Loader" Halaman Vol.2', dimana pada postingan saya yang lalu pernah juga membahas 'Pasang Efek Animasi "Page Loader" Halaman Vol.1'. jadi trik kli ini saya akan membuat berbeda dari postingan yang lalu yaitu dgn memberikan efek loading animasi Circle keyframes kurang lebih seperti pada gambar berikut.


Baiklah jika sobat tertarik untuk memasangnya, maka silahkan ikuti langkah-langkah berikut.

/* 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/AVvXsEiBsrP1KPQzWTFqIfhqUqPaV2o2fG06R_EpknRYoTBKhhuBwrjeIdgsOa8EJQB1T3sdek__XDyFTtK89QEpD_F0ZS320gcXsBngm5tY2zItTyh0sRQf6ycmG3RzbXh4_Ilw_BAQqF3xV6sj/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 -->

5. Simpan Template dan Selesai.

Semoga Berhasil ;) Please rate this article: