Loading page dengan CSS3 Animasi

Hello sobat,pada kesempatan kali ini,saya akan berbagi trik cara memasang Efek loading page dengan CSS3 Animasi hasil modifikasi saya sendiri full menggunakan CSS3 dan dan css3 keyframe animation dengan menggunakan timing yang tepat~xD


ScreenShot:

Oia,sebelumnya saya ingatkan,untuk memasang loader page ini,lebih baik diterapkan pada blog yang beban-nya belum terlalu berat,karena menggunakan trik ini akan menambah sedikit beban pada blog anda,dan itu juga tergantung pada konten" pada blog anda,dan jangan lupa untuk selalu membackup template anda agar tidak terjadi sesuatu yang tidak diinginkan~

mau dicoba? ikuti langkah' dibawah ini :

CSS

Buka blogger=>template=> Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code ]]></b:skin>

#sliderloadingwrapper {width:100%;height:100%;
position:fixed;z-index: 999999999999999999999999999999;
background: rgba(95, 130, 187, 0.2);top: 0px;
left: 0px;-webkit-animation: fadeOut 15s linear forwards;
-moz-animation: fadeOut 15s linear forwards;
-o-animation: fadeOut 15s linear forwards;
-ms-animation: fadeOut 15s linear forwards;
animation: fadeOut 15s linear forwards;}
/* Blog johanes djogzs.blogspot.com */
#sliderloader {
width: 500px;
height: 85px;
overflow: hidden;
background-color: #8CA5CE;
border: 1px solid #5F82BB;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
margin-bottom: 30px;
border-radius: 5px;
box-shadow: inset 0 0px 20px rgba(0, 0, 0, 0.2), 0 0px 0 #5E524F;
border-bottom: 1px solid #222;
margin: auto;
margin-top: 200px;}
#progressbg {
width:460px;
margin:auto;
height:5px;
background-color:#ddd;
top:65px;
position:relative;
}/* Blog johanes djogzs.blogspot.com */
#johanesloader {
width:1px;
height:5px;
background-color:#ffd000;
-moz-animation:johanesloader 70s infinite;
-webkit-animation:johanesloader 70s infinite;
position:relative;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}/* Blog johanes djogzs.blogspot.com */
#sliderloader ul {
width:2630px;
list-style:none;
padding:0;
margin:0;
position:relative;
left:0px;
}/* Blog johanes djogzs.blogspot.com */
#sliderloader li {
display:inline;
width:500px;
height:100px;
margin:0;
padding:0;
float:left;
position:relative;
}/* Blog johanes djogzs.blogspot.com */
#sliderloader li a {
display:block;
text-decoration:none;}
#sliderloader li span {
display: block;
width: 460px;
padding: 10px 20px;
text-shadow: 1px 1px 1px #362c30;
pointer-events: none;
text-align: left;
float: left;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}/* Blog johanes djogzs.blogspot.com */
#sliderloader ul li span h2 {
font-size:13px;
line-height:24px;
color:#fff;letter-spacing: 1px;
font-weight:normal;
text-shadow:1px 1px 2px #362c30;
text-transform:uppercase;
}/* Blog johanes djogzs.blogspot.com */

@-webkit-keyframes johanesloader {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:460px; opacity:1;}
22.5% {width:460px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:460px; opacity:1;}
47.5% {width:460px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:460px; opacity:1;}
72.5% {width:460px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:460px; opacity:1;}
98% {width:460px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes johanesloader {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:460px; opacity:1;}
22.5% {width:460px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:460px; opacity:1;}
47.5% {width:460px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:460px; opacity:1;}
72.5% {width:460px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:460px; opacity:1;}
98% {width:460px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes fadeOut {
0% { opacity: 1;top:0px;}
10% { opacity: 1;top:0px; }
90% { opacity: 1; -webkit-transform: translateY(0px);top:0px;}
99% { opacity: 0; -webkit-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}
@-moz-keyframes fadeOut {
0% { opacity: 1;top:0px; }
10% { opacity: 1;top:0px; }
90% { opacity: 1; -moz-transform: translateY(0px);top:0px;}
99% { opacity: 0; -moz-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}

@-o-keyframes fadeOut {
0% { opacity: 1;top:0px; }
10% { opacity: 1;top:0px; }
90% { opacity: 1; -o-transform: translateY(0px);top:0px;}
99% { opacity: 0; -o-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}

@-ms-keyframes fadeOut {
0% { opacity: 1;top:0px;}
10% { opacity: 1;top:0px;}
90% { opacity: 1; -ms-transform: translateY(0px);top:0px;}
99% { opacity: 0; -ms-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}

@keyframes fadeOut {
0% { opacity: 1;top:0px; }
10% { opacity: 1;top:0px; }
90% { opacity: 1; transform: translateY(0px);top:0px;}
99% { opacity: 0; transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px; }
}

HTML

Sedangkan untuk Kode Html ini diletakan di atas kode </body>

<div id='sliderloadingwrapper'><div id='sliderloader'>
<ul><li><span><h2>Loading Page . . .</h2></span></li></ul>
<div id='progressbg'><div id='johanesloader'>
</div></div></div></div>

Selamat mencoba,semoga bermanfaat untuk agan-agan