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(http://1.bp.blogspot.com/-WzSnoUguCBc/UTftCm0wM7I/AAAAAAAACD4/1ebnSoA5LV4/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

1 komentar :

Click here for komentar
18 November 2013 17.10 ×

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

Congrats bro info-kmu you got PERTAMAX...! hehehehe...
Reply
avatar

Berikan Komentar yang bermanfaat dan sehat. Conversion Conversion Emoticon Emoticon