网页Loading加载动画(一)

网页加载loading动画效果：

CSS：代码

<style type="text/css">
#loading{ width:99%;position: absolute; top: 50%;}
#loading div{height: 1px; position: absolute; top: 50%; background: #000; text-align: right;filter:alpha(Opacity=30); opacity: 0.3}
#loading span{position: absolute; left: 50%;top: -30px;font-size: 16px;}
</style>

HTML:代码

<div id="loading"><div></div><span></span></div>

JQuery代码：

<script type="text/javascript">
//0-100加载过程函数
function SetProgress(progress) {
if (progress) {
    $("#loading div").css("width",String(progress) + "%"); //控制#loading div宽度
    $("#loading span").html(String(progress) + "%");  //显示百分比
  }
}
//
var i = 0;
function doProgress() {
    if (i > 100) {
    //这里是加载成功后执行的
    alert('加载成功了...');
    }
    if (i <= 100) {
    //定时 回调doProgress() 函数
    setTimeout("doProgress()",20);
    SetProgress(i);
    i++;
    }
}
$(document).ready(function() {
//调用
   doProgress();
});
</script>

玄玄 博客 http://www.blogxuan.com/