页面加载动态效果制作

首先看看效果图：

图片和样式可以自己定义，下面是代码：

首先是样式:

<style>
#loader_container {
text-align:center;
position:fixed;
top:70px;
left:0;
width:100%;
z-index:10000;
filter:alpha(opacity=85);
-moz-opacity:0.85;
opacity:0.85;
}
* html #loader_container {
position:absolute;
}
#loader {
font-family:Tahoma, Helvetica, sans;
font-size:12px;
color:#004a8f;
background-color:#ecf5ff;
display:block;
width:200px;
border:1px solid #81b9ff;
text-align:left;
margin:0 auto;
padding:5px 0;
}
#loader div {
margin: 4px 0;
}

</style>

然后在页面中添加javascript代码:

<script type="text/javascript">
document.onreadystatechange=function()
{
if(document.readyState=="complete")
{
document.getElementById('loading').style.display='none';
}
}
</script>

最后在页面上添加以下html代码:

<div id="loading" style="position:absolute;width:100%;height:100%;left:0px;top:0px;background-color:#ffffff;filter:alpha(opacity=100)">
<div id="loader_container">
<div id="loader">
<div align="center">数据正在加载中,请稍候……</div>
<div align="center">
<img src="../images/loading.gif" alt="loading" />
</div>
</div>
</div>
</div>

下面这个是动态图片：

一个简单的页面加载动画就完成了。