<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
js进度条-www.jb200.com</title>
<style type="text/css">
body
{
padding: 20px;
font-size: 14px;
}
#progressbar
{
width: 278px;
}
#progressbar .border
{
border: 1px solid #777;
width: 276px;
height: 13px;
padding: 1px;
}
#progressbar .bar
{
background-color: #73c944;
width: 50%;
height: 13px;
overflow: hidden;
}
#progressbar .desc
{
text-align: center;
font-size: 12px;
line-height: 24px;
}
</style>
<script src='#'" /
jquery-1.4.2.min.js" type="text/
javascript"></script>
<script type="text/javascript">
var loading = function(){
var ct = $("#progressbar");
var desc=$("#desc");
var bar = $("#bar");
var idx = 0;
var time = 500;
bar.setValue = function(n){
$("#bar").css({"width":n + "%"});
};
void function(){
bar.setValue(idx += (100 - idx) *.2);
timer = setTimeout(arguments.callee, time += 100);
}();
return {
remove: function(){
clearTimeout(timer);
$("#desc").html("加载完成");
bar.setValue(100);
}
};
}();
setTimeout(loading.remove, 10000);
</script>
</head>
<body>
<div id="progressbar">
<div class="border" id="border">
<div class="bar" style="width: 36px; background-color: Green" id="bar">
</div>
<div class="desc" id="desc">
js进度条，正在加载...</div>
</div>
</div>
</body>
</html>
