Cara Membuat Animasi Loading Pada Blog ~ Trelo-Skato

Friday 19 December 2014

Sobat Trelo-skato, pada siang hari ini kita akan membahas bagaimana acara membuat animasi loading pada blog, animasi loading pada blog adalah salah satu aksesoris untuk memperindah tampilan blog, terutama di saat blog loading, untuk membuat atau memasangnya di blog tidaklah sulit dan simple sekali, tetapi perlu sedikit ketelitian dalam meletakan kode-kodenya saja, untuk menginstallnya ikuti proses yang akan saya jelaskan berikut ini:

cara membuat animasi loading pada blog

Langkah² nya:
1. Login ke akun blogger sobat
2. Klik Template » Edit HTML 3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan kode CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.ip-header {
position: fixed;
top: 0;
z-index: 100;
min-height: 480px;
width: 100%;
height: 100%;
background: #505050 url(http://i48.photobucket.com/albums/f237/acebangsam/dark-loading_zpslijlo4wq.gif) no-repeat center center;

/* warna background dan gambar loader */
z-index: 999999;
}
.ip-header .ip-loader svg path.ip-loader-circlebg {
stroke: #fff; /* warna background circle loader */
}
.ip-header .ip-loader svg path.ip-loader-circle {
-webkit-transition: stroke-dashoffset 0.2s;
transition: stroke-dashoffset 0.2s;
stroke: #13BAFA; /* Warna garis circle saat loading */
}
/* Pre-Loader main */
.ip-loader {
position: absolute;
left: 0;
width: 100%;
opacity: 0;
cursor: default;
pointer-events: none;
}
.ip-loader {
bottom: 20%;
}
.ip-header .ip-inner {
display: block;
margin: 0 auto;
}
.ip-header .ip-loader svg path {
fill: none;
stroke-width: 6;
}

/* Animasi */
.loading .ip-loader {
opacity: 1;
-webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
}
.loading .ip-loader {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
@-webkit-keyframes animInitialHeader {
from { opacity: 0; -webkit-transform: translate3d(0,800px,0); }
}
@keyframes animInitialHeader {
from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform: translate3d(0,800px,0); }
}
.loaded .ip-loader {
opacity: 1;
}
.loaded .ip-loader {
-webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
}
@-webkit-keyframes animLoadedLoader {
to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}
@keyframes animLoadedLoader {
to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}

/* Animasi header ketika loading selesai */
.loaded .ip-header {
-webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
}
@-webkit-keyframes animLoadedHeader {
to { -webkit-transform: translate3d(0,-100%,0); }
}
@keyframes animLoadedHeader {
to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
}
.layout-switch .ip-header {
position: absolute;
}

5. Tekan Ctrl+F cari kode </head> 6. Lalu tambahkan kode jQuery berikut ini tepat diatas kode </head>

<script src='http://zmaxs.googlecode.com/svn/trunk/modernizr-custom.js' type='text/javascript'></script>
<script src='https://zmaxs.googlecode.com/svn/loader.js' type='text/javascript'></script>

7. Letakan kode jQuery berikut ini tepat diatas kode </body>

<script type="text/javascript" src="http://zmaxs.googlecode.com/svn/classie-hlp.js"></script>
<script type="text/javascript" src="http://zmaxs.googlecode.com/svn/pathloader-v1.0.0.js"></script>
<script type="text/javascript" src="http://zmaxs.googlecode.com/svn/main-buttom.js"></script>

7. Terakhir Letakan kode HTML berikut ini tepat dibawah kode <body>

<div class='ip-container' id='ip-container'>
<div class='ip-header'>
<div class='ip-loader'>
<svg class='ip-inner' height='60px' viewBox='0 0 80 80' width='60px'>
<path class='ip-loader-circlebg' d='M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z'/>
<path class='ip-loader-circle' d='M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z' id='ip-loader-circle'/></svg></div></div></div>

Save Template. Done!

Good Luck

Demo On Blog Demo jSFiddel