网页进度条 代码

原创 2007年10月09日 14:47:00

<script type="text/javascript">
window.onload=function(){
  var a = document.getElementById("loading");
  a.parentNode.removeChild(a);
}
document.write('<div id="loading" style="background:#CC4444;color:#FFF;width:80px;padding-left:5px;position:absolute;line-height:22px">正在读取...</div>');
</script>
<body style="margin:0px;padding:0px;font-size:12px;overflow-y:hidden">  
  <iframe src="http://www.sosuo8.com" width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0"></iframe>
 
</body>

 

 

<html>
<head>
<style type="text/css">
/*Loader
----------------------------------------------*/
#loader_container {
  text-align:center;
  position:absolute;
  top:60%;
  width:100%;
  left: 0;
}
#loader {
  font-family:Tahoma, Helvetica, sans;
  font-size:11.5px;
  color: #abc;
  background-color:#000;
  padding:10px 0 16px 0;
  margin:0 auto; 
  display:block;
  width:130px;
  border:1px solid #abc;
  text-align:left; 
  z-index:2;
}
#loader_bg {background-color: #abc;
  position:relative;
  top:8px;
  left:8px;
  height:7px;
  width:113px;
  font-size:1px}
#progress {
  height:5px;
  font-size:1px;
  width:1px;
  position:relative;
  top:1px;
  left:0px;
  background-color: #fff;
}
 </style>
<script type="text/javascript">
var t_id = setInterval(animate,20);
var pos=0;
var dir=2;
var len=0;
function animate()
{
var elem = document.getElementById('progress');
if(elem != null) {
if (pos==0) len += dir;
if (len>32 || pos>79) pos += dir;
if (pos>79) len -= dir;
if (pos>79 && len==0) pos=0;
elem.style.left = pos;
elem.style.width = len;
}
}
function remove_loading() {
this.clearInterval(t_id);
var targelem = document.getElementById('loader_container');
targelem.style.display='none';
targelem.style.visibility='hidden';
}
</script>
</head>
<body onLoad="remove_loading();">
<div id="loader_container" onclick="this.style.display='none'" title="点击关闭">
<div id="loader">
<div align="center">网页正在载入中 ...</div>
<div id="loader_bg"><div id="progress"> </div></div>
</div>
</div>
<img src="http://static.flickr.com/25/57001474_6d174fdce4_o_d.jpg" />
</body>
</html>

 

<style type="text/css">
 body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#222; left:0; top:0; width:100%; height:100%;zIndex:-2;}
</style>
<div id="imgsrc" style="visibility:hidden">
 <img src="http://www.webjx.com/upfiles/20050411/BS9097.jpg">
 <img src="http://www.webjx.com/upfiles/20050411/BS9092.jpg">
 <img src="http://www.webjx.com/upfiles/20050411/BS9084.jpg">
 <img src="http://www.webjx.com/upfiles/20050411/BS9064.jpg">
 <img src="http://www.webjx.com/upfiles/20050411/BS9050.jpg">
 <img src="http://www.webjx.com/upfiles/20050411/BS9070.jpg">
 <img src="http://www.webjx.com/upfiles/20050411/BS9079.jpg">
 <img src="http://www.webjx.com/upfiles/20050411/BS9068.jpg">
 <img src="http://www.webjx.com/upfiles/20050411/BS9039.jpg">
</div>
<script>
document.write('<span id=LB0 style="position:absolute;left:50%;top:50%;">');
document.write('<span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50;top:-18">Loading...</span>');
document.write('<span style="position:absolute;left:-50;top:-5;font-size:1px;width:100;height:10px;background:#333">');
document.write('<span id=LB1 style="position:absolute;left:0;top:0;font-size:1px;width:0;height:10px;background:#FFFFFF"></span></span></span>');
m00=document.getElementById("imgsrc").getElementsByTagName("img");
m01=m00.length;
function images_loading_bar()
{
m02=0;
for(i=0;i<m01;i++)
m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100);
if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128);
else setTimeout("images_loading_bar()", 64);};
images_loading_bar();
</script>
 

HTML5 CSS3 诱人的实例 : 网页加载进度条的实现,下载进度条等

今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用;一般用于下载任务,删除大量任务...
  • lmj623565791
  • lmj623565791
  • 2014年06月26日 12:06
  • 46543

jquery 简单的进度条实现代码

效果图 需要用到的图片: 背景图片: 进度显示图片: 网页结构: 复制代码 代码如下: css代码: 代码 复制代码 代码如下:...
  • chinajobs
  • chinajobs
  • 2015年04月16日 09:15
  • 3413

如何检测网页的加载进度。从而编写进度条

对于如何检测网页加载进度这个问题,百度了一下,没有好的答案。可以说是没有答案。但是找到了一个开源项目。 pace.js如何想直接用现成的进度条。这个库很丰富,现在想要分析一下它的源代码来了解,如何检...
  • xiaoseqingchun
  • xiaoseqingchun
  • 2015年06月06日 15:04
  • 4098

网页自动跳转代码html有进度条

  • 2010年11月18日 18:28
  • 2KB
  • 下载

jQuery网页步骤流程进度条代码

  • 2016年08月15日 10:37
  • 94KB
  • 下载

13种CSS3网页加载进度条效果

  • 2017年08月02日 14:05
  • 29KB
  • 下载

网页精美进度条

  • 2015年07月03日 09:43
  • 43KB
  • 下载

加载网页进度条

  • 2013年05月07日 22:44
  • 5KB
  • 下载

仿微信网页加载进度条

  • 2017年12月25日 12:09
  • 2KB
  • 下载

jQuery网页加载进度条插件

  • 2014年03月11日 15:47
  • 51KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页进度条 代码
举报原因:
原因补充:

(最多只允许输入30个字)