CSS: Membuat Loading Facebook di Blog

CSS: Membuat Loading Facebook di Blog adalah membuat animasi loading yang sama seperti yang ada di facebook. Membuat loading seperti facebook ini dengan menggunakan kode css sehingga di eidt sesuai dengan keinginan dan biasanya loading yang ada di facebook berada di pojok kanan atas dan akan keluar saat melakukan update status, baik status berupa artikel, gambar, dan video atau yang terlihat seperti gambar berikut ini

Sebenarnya membuat loading facebook di blog ini tidak harus menggunakan kode css dan lebih baik menggunakan gambar yang beranimasi (.gif) JIKA jumlah kode css lebih besar daripada ukuran gambar tersebut

Loading Facebook Dengan Gambar

Loading Facebook Dengan CSS

Dengan tampilan yang hampir sama, mana yang harus dipilih? Menggunakan css atau menggunakan gambar bergerak? Nah dari beberapa sumber yang saya baca, hanya di Crazy Egg yang bekerja dan di artikel ini saya memcoba menyamakan tampilan loading facebook ini agar sama dengan yang aslinya. Berikut cara membuat loading facebook di blog :

Salin kode CSS berikut ini diatas atau sebelum kode ]]></b:skin> Jika didalam template Anda menggunakan </style>, salin sebelum </style>

.fbloading div{
height:50px;
width:16px;
margin:10px auto;
display:inline-block;
background-color:#8b9dc0;
border:1px solid #8b9dc0;
-webkit-animation:fbloader 1s linear infinite;
-moz-animation:fbloader 1s linear infinite;
animation:fbloader 1s linear infinite;
-webkit-transform:scale(0.91);
-moz-transform:scale(0.91);transform:scale(0.91);
}
.fbloading div:nth-child(1){
-webkit-animation-delay:0.49s;
-moz-animation-delay:0.49s;animation-delay:0.49s;
}
.fbloading div:nth-child(2){
-webkit-animation-delay:0.62s;
-moz-animation-delay:0.62s;animation-delay:0.62s;
}
.fbloading div:nth-child(3){
-webkit-animation-delay:0.75s;
-moz-animation-delay:0.75s;animation-delay:0.75s;
}
@-webkit-keyframes fbloader{
0%{-webkit-transform:scale(1.2);opacity:0.1}
100%{-webkit-transform:scale(0.7);opacity:5}
}
@-moz-keyframes fbloader{
0%{-moz-transform:scale(1.2);opacity:0.1}
100%{-moz-transform:scale(0.7);opacity:5}
}
@keyframes fbloader{
0%{transform:scale(1.2);opacity:0.1}
100%{transform:scale(0.7);opacity:5}
}

Salin kode markup HTML berikut untuk memanggil kode loading facebook yang telah Anda dibuat di kode CSS diatas

<div class="fbloading">
     <div></div>
     <div></div>
     <div></div>
</div>

Bagaimana tertarik untuk membuat loading facebook ini di blog Anda? Silahkan dan semoga bermanfaat

CSS: Membuat Loading Facebook di Blog 2014-04-01T14:24:00+08:00 Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni