Testimoni, baca dulu ‘kumpulan tutorial membuat loading page animasi blog cepat, komplit!’.
Animasi loading page balutan CSS3 berbentuk lingkaran yang beberapa
bagiannya bewarna merah dan kuning. Gaya animasi page blog ini bergerak
cepat mengarah seperti jarum jam dan kemudian berbalik arah putaran.
Cara penerapannya, sobat langsung ke Template, mengklik Edit HTML:
1. Copy script Jquery berikut, jika telah ada sebelumnya lewati langkah ini.
Paste Jquery di atas kode </head>,
Selamat mencoba, happy blogging
 |
| Cara Membuat Loading Page Animasi Bola Kontras (Foto: screenshoot) |
Paste Jquery di atas kode </head>,
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>2. Letakan kode CSS berikut di atas kode ]]></b:skin>,
/* X-Gen Loader */3. Posisikan JavaScript berikut di bawah kode <body>,
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
#load2 body {
background-image: url(../images/hexabump.png);
background-color: #222;
}
#load2 body:after {
content: "";
z-index: -1;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: -webkit-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
}
#load2 .spinner {
position: relative;
font-size: 100px;
width: 1em;
height: 1em;
margin: 100px auto;
border-radius: 50%;
background: #123456;
box-shadow: inset 0 0 0 .12em rgba(0,0,0,0.2), 0 0 0 .12em rgba(255,255,255,0.1);
background:
-webkit-linear-gradient(#ea2d0e 50%, #fcd883 50%),
-webkit-linear-gradient(#fcd883 50%, #ea2d0e 50%);
background:
-moz-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
-moz-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
background:
-ms-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
-ms-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
background:
-o-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
-o-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
background:
linear-gradient(#ea2d0e 50%, #ffdd72 50%),
linear-gradient(#ffdd72 50%, #ea2d0e 50%);
background-size: 50% 100%, 50% 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
opacity: 0.7;
-webkit-animation: mask 3s infinite alternate;
-moz-animation: mask 3s infinite alternate;
-ms-animation: mask 3s infinite alternate;
-o-animation: mask 3s infinite alternate;
animation: mask 3s infinite alternate;
}
@-webkit-keyframes mask {
25% { -webkit-transform: rotate(270deg); }
50% { -webkit-transform: rotate( 90deg); }
75% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(180deg); }
}
@-moz-keyframes mask {
25% { -moz-transform: rotate(270deg); }
50% { -moz-transform: rotate( 90deg); }
75% { -moz-transform: rotate(360deg); }
100% { -moz-transform: rotate(180deg); }
}
@-ms-keyframes mask {
25% { -ms-transform: rotate(270deg); }
50% { -ms-transform: rotate( 90deg); }
75% { -ms-transform: rotate(360deg); }
100% { -ms-transform: rotate(180deg); }
}
@-o-keyframes mask {
25% { -o-transform: rotate(270deg); }
50% { -o-transform: rotate( 90deg); }
75% { -o-transform: rotate(360deg); }
100% { -o-transform: rotate(180deg); }
}
@keyframes mask {
25% { transform: rotate(270deg); }
50% { transform: rotate( 90deg); }
75% { transform: rotate(360deg); }
100% { transform: rotate(180deg); }
}
<!-- Start Andi-Techno.blogspot.com Loader -->4. Selesai, tekan tombol Simpan Template. Jika langkah dirasa sudah benar, review hasilnya.
<script type='text/javascript'>
//<![CDATA[
$(function() {
setTimeout(function() {
$('#xgenloader-screen').fadeOut();
}, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="load2"><div class="spinner">
<i class="sphere"></i>
</div></div>
</div>
<!-- End Loader -->
Selamat mencoba, happy blogging
), setidaknya ada beberapa cara-cara praktis yang ingin Saya tuliskan
disini, eh bentar, disclaimer dulu!!! apa yang Saya tuliskan disini
adalah murni dari pengalaman, Jadi jangan tertawakan ya kalau ada
cara-cara yang agak aneh… 
oh iya cara-cara yang Saya pakai disini tingkat keberhasilannya mencapai 68% pada komputer yang ber-OS windows (artinya hasilnya tidak semuanya berhasil).
lihat di 
hiks. buat para pembajak.. kalau mau mbajak tolong cantumkan juga link kesini 
