您的位置：首页 > Web前端 > JavaScript

一个不错的js loading源码

2015-06-19 11:27 597 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body onprogress="">
<div class="progress">
<div class="progress-inner" id="progress"></div>
</div>
<iframe src="http://baidu.com/" frameborder="0"></iframe>
<iframe src="http://163.com/" frameborder="0"></iframe>
<iframe src="http://qq.com/" frameborder="0"></iframe>
<iframe src="http://tencent.com/" frameborder="0"></iframe>
</body>
</html>

.progress{
position: fixed;
top: 0;
right: 0;
left: 0;
height: 20px;
background: #f5f5f5;
border-bottom: 1px solid #ddd;
}

.progress-inner{
width: 1%;
background: #abcdef;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}

(function () {
// 获取进度条 div
var $progress = document.getElementById('progress');

// 初始进度，1%
var progress = 1;

// 生成随机数
var random = function(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
};

// 跑进度
var onprogress = function () {
// 随机时间
var timeout = random(10, 30);

setTimeout(function () {
// 如果页面加载完毕，则直接进度到 100%
if(window.loaded){
$progress.style.width = '100%';
return;
}

// 随机进度
progress += random(1, 5);

// 随机进度不能超过 98%，以免页面还没加载完毕，进度已经 100% 了
if(progress > 98){
progress = 98;
}

$progress.style.width = progress + '%';
onprogress();
}, timeout);
};

// 开始跑进度
onprogress();

window.onload = function(){
window.loaded = true;
};
})();

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航