Membuat Animasi Loading [CSS]

Membuat Animasi Loading untuk mempercantik tampilan saat akan ada proses di web, berikut ada sekedar menyimpan catatan saja, mana tau ada yang butuh. Cara Mudah membuat animasi Loading menggunakan CSS:
code Style
<style>
*{
padding: 0;margin: 0;
}
a{
text-decoration: none;
color: #333;
}
body{
background:#ddd url('http://subtlepatterns.com/patterns/textured_paper.png');
font-family: 'Titillium Web', sans-serif;
}
iframe{
margin: 20px 0;
}
h1{
text-align: center;
}
h2{
margin: 15px 0;
line-height: 1em;
font-size: 17px;
}
p{
margin:10px 0;
}
#loading {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuozvdXXjCv-JgBz4-K8QSfhuWYJJ7C4WGfU8LrsaWYx7zpHQM2IGAe8YAIJUrPmwGJ7cQE7ukMiDgjEmoakhs2w2scgIy95ZsS-dBP4vaHzECNRhRL_Drr9F9pRriBhWfdY7oztj1zEU/s1600/loading51.gif) 50% 50% no-repeat #fff;
}
.container{
width: 730px;
margin: 0 auto;
padding: 20px;
background: #fff;
}
header{

}
.content img{
width: 240px;
height: 200px;
}
</style>
 Ganti alamat tulisan biru untuk menganti model animasi loadingnya.
Untuk Kode JS
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() { $("#loading").fadeOut("slow"); })
</script>
Di bawahnya berikan tag div
<div id="loading"></div> 
Untuk Script lengkap download di sini  : DOWNLOAD
Untuk Demonya bisa di lihat di sini : DEMO

2 Komentar

Berikan Komentar yang bermanfaat dan sehat.

  1. ooo.. gtu ya.. kirain cuma CSS z ternyata ada JSnya jga

    BalasHapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
Posting Komentar
Lebih baru Lebih lama