<!DOCTYPE html>
<html>
<head>
<title>DEMO</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no"/>
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="js/lib/jquery/jquery-2.1.4.js"></script>
<style>
.loading{
background:#FF6100; //设置进度条的颜色
height:5px; //设置进度条的高度
position:fixed; //设定进度条跟随屏幕滚动
top:0; //将进度条固定在页面顶部
z-index:99999 //提高进度条的优先层级，避免被其他层遮挡
}
</style>
</head>
<body>
<div class="loading"></div>
<div id="header">
页头部分
</div>
<script type="text/javascript">
$('.loading').animate({'width':'33%'},50);
//第一个进度节点
</script>
<div id="mainpage">
左侧内容
</div>
<script type="text/javascript">
$('.loading').animate({'width':'55%'},50);
//第二个进度节点
</script>
<div id="sider">
右边侧栏
</div>
<script type="text/javascript">
$('.loading').animate({'width':'80%'},50);
//第三个进度节点
</script>
<div id="footer">
页脚部分
</div>
<script type="text/javascript">
$('.loading').animate({'width':'100%'},50);
//第四个进度节点
</script>
<script>
$(document).ready(function(){
$('.loading').fadeOut();
});
</script>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
