.png)
Cara Membuat Efek Loading Dengan Animasi
langsung aja ya Gan..
- Pertama masuk ke Edit HTML
- Lalu cari kode ]]></b:skin>
- Kemudian pastekan kode dibawah ini diatas kode ]]></b:skin>
/* Efek Loading Animasi */
#pageLoadaka {
position: fixed;top:0;left:0;background-color:6f0f60; z-index: 9999;text-align:center;
width:100%;height:100%;padding-top:22%;font-size:25px;color:#e20000;display:none;}
.loader {
background-color:rgba(0,0,0,0);
border:5px solid #a9a9a9;
opacity:.9;
border-right:5px solid #f90;
border-left:5px solid #f90;
border-radius:60px;
box-shadow:0 0 35px #a9a9a9;-moz-box-shadow:0 0 35px #a9a9a9;-webkit-box-shadow:0 0 35px #a9a9a9;
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/AVvXsEgZZckG8z0T7vHTGxCyF0_uUu7H-QhLJBZLCKkbAAV1AspvqYRkIpF8gGVhYR5NhoDDvSGaFMU8YPyzio2iF_wkRC_4eTT0gYKDGRveIZ0pVhhuONOhhdfUb2RMxLvQJvcnRzdnrUXzRzRL/s1600/cyrle.png) no-repeat center;
background-repeat: no-repeat
border:2px solid #a9a9a9;
opacity:.9;
border-radius:45px;
box-shadow:0 0 35px #f90;-moz-box-shadow:0 0 35px #f90;-webkit-box-shadow:0 0 35px #f90;
width:70px;
height:70px;
margin:0 auto;
position:relative;
top:-181px;
}
.loader2 {
background-color: rgba(0,0,0,0);
border:5px solid #a9a9a9;
opacity:.9;
border-left:5px solid #f90;
border-right:5px solid #f90;
border-radius:50px;
box-shadow:0 0 40px #1b9111;-moz-box-shadow:0 0 40px #1b8111;-webkit-box-shadow:0 0 40px #1b8111;
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 2px #f90;}
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 2px #f90; }
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); }
}
- Kemudian pastekan lagi kode dibawah ini tepat diatas kode </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 -->
Backlinks Please Thanks
| URL |
| Code For Forum |
| HTML Code |
