Tạo ảnh loading đẹp với css và js

Cái thủ thuật này xưa lắm rồi các bạn ạ , nhưng làm thì chúng ta phải có ảnh loading , mà trong khi đó thì các ảnh không được đa dạng và nhìn nó chạy cảm thấy rất nặng , nhưng với cssload.net Chúng ta không phải ngại về vấn đề trên nữa.





1.Thêm .js:
Thêm đoạn js sau vào trước </head> :

<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga() {
document.getElementById("loading").style.display="none";
}
</script>

2.Đoạn html:
Sau đó tạo một widget HTML/Javascript » rồi dán đọan code bên dưới vào:

<style>
#circleG{
width:149.33333333333334px;
}

.circleG{
background-color:#48c7a9;
float:left;
height:32px;
margin-left:17px;
width:32px;
-webkit-animation-name:bounce_circleG;
-webkit-border-radius:21px;
-webkit-animation-duration:1.35s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-moz-animation-name:bounce_circleG;
-moz-border-radius:21px;
-moz-animation-duration:1.35s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
opacity:0.3}

#circleG_1{
-webkit-animation-delay:0.27s;
-moz-animation-delay:0.27s}

#circleG_2{
-webkit-animation-delay:0.63s;
-moz-animation-delay:0.63s}

#circleG_3{
-webkit-animation-delay:0.8099999999999999s;
-moz-animation-delay:0.8099999999999999s}

@-webkit-keyframes bounce_circleG{
0%{
opacity:0.3}

50%{
opacity:1;
background-color:#19409a}

100%{
opacity:0.3}

}

@-moz-keyframes bounce_circleG{
0%{
opacity:0.3}

50%{
opacity:1;
background-color:#19409a}

100%{
opacity:0.3}

}

</style>
<div border="0" style="position:fixed; width: 100%; height: 70px; z-index: 1; top: 300px; left: 0;" id="loading" align="center"> <table border="0" width="150" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#003300"> <tr> <td align="center"> <div border="0" style="background-color: #000; color: #fff;filter: alpha(opacity=70); opacity: .7; width: 190px; height: 70px; z-index: 1; border-collapse: collapse;-moz-border-radius: 5px;
-webkit-border-radius: 5px;" bordercolor="#006600" align="center"> <b>Đang tải dữ liệu...</b><br /><div id="circleG">
<div id="circleG_1" class="circleG">
</div>
<div id="circleG_2" class="circleG">
</div>
<div id="circleG_3" class="circleG">
</div>
</div> Nhấn F5 nếu đợi quá lâu</div> </td> </tr> </table> </div>

Nếu các bạn không thích thì vào cssload.net để tạo các style khác nhau , và thay chỗ css màu xanh thành đoạn css mà bạn muốn , thay code màu đỏ thành chỗ hiển thị ảnh loading. Đoạn code màu vàng để thay đổi chiều cao cho khung.