<HTML>
<HEAD>
<TITLE>进度条实例</TITLE>
<!--进度条-->
<STYLE type=text/css>
#loader_container {
LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 30%; TEXT-ALIGN: center;
}
#loader {
BORDER-RIGHT: #99cc00 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #99cc00 1px solid; DISPLAY: block; PADDING-LEFT: 0px; FONT-SIZE: 11px; Z-INDEX: 10; PADDING-BOTTOM: 16px; MARGIN: 0px auto; BORDER-LEFT: #99cc00 1px solid; WIDTH: 200px; COLOR: #000000; PADDING-TOP: 10px; BORDER-BOTTOM: #99cc00 1px solid; FONT-FAMILY: Tahoma, Helvetica, sans; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: left;
}
#progress {
FONT-SIZE: 1px; LEFT: 0px; WIDTH: 1px; POSITION: relative; TOP: 1px; HEIGHT: 10px; BACKGROUND-COLOR: #009900;
}
#loader_bg {
FONT-SIZE: 1px; LEFT: 8px; WIDTH: 180px; POSITION: relative; TOP: 8px; HEIGHT: 12px; BACKGROUND-COLOR: #e4e7eb;
}
</STYLE>
<SCRIPT language=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>148) pos += dir;
if (pos>148) len -= dir;
if (pos>148 && 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>
<!--//进度条-->
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<LINK href="loading.files/style.css" type=text/css rel=stylesheet>
<BODY leftMargin=0 topMargin=1 onload=remove_loading();>
<!--进度条-->
<DIV id=loader_container>
<DIV id=loader>
<DIV align=center>加载中,请稍等 ...</DIV>
<DIV id=loader_bg>
<DIV id=progress></DIV>
</DIV>
</DIV>
</DIV>
<!--//进度条-->
<iframe src="http://news.sohu.com" height="500"></iframe>
</BODY>
</HTML>
分享到:
相关推荐
C#进度条实例源码 源码程序,本人调试过,准确无误,可直接使用或二次开发
读文件和进度条实例读文件和进度条实例读文件和进度条实例读文件和进度条实例读文件和进度条实例读文件和进度条实例读文件和进度条实例读文件和进度条实例读文件和进度条实例读文件和进度条实例读文件和进度条实例读...
javascript进度条实例 进度条加载实例
JavaScript制作进度条实例JavaScript制作进度条实例JavaScript制作进度条实例JavaScript制作进度条实例JavaScript制作进度条实例JavaScript制作进度条实例
ExtJs实现进度条实例.htmExtJs实现进度条实例.htmExtJs实现进度条实例.htmExtJs实现进度条实例.htm
NULL 博文链接:https://davice-li.iteye.com/blog/779477
下载进度条实例+代码+说明 自己写的下载工具条 可以使用与很多场合
jquery圆形进度条实例,代码亲测没有问题。简单好用的圆形进度条实例
ExtJs实现进度条实例,供大家一起参考学习。
MFC多线程进度条实例 分别在父窗口与子窗口中实现进度条
swfupload多文件上传带进度条实例,vs2012开发,net4.0框架,可上传多个文件,上传类型、上传大小、上传数量可控,已测试成功!
Delphi状态栏进度条实例..rar`
这是一个改进版的android进度条实例,本实例中,进度条在进度过程中,会在进度条中显示相应的进度百分比,而且该百分比的显示位置会根据你当前的进度点位置而自动变换位置,要么显示在左边,要么显示在右边,非常...
cocos2dx 3.1.1 ProgressTimer游戏进度条实例(C++) 进度条,在游戏中是一个很常用的好东东,哈哈.该实例是cocos2dx 3.1.1 c++环境下的, 图片素材是我自己网上找的,然后再ps滴,练习而已凑合着用吧~ 代码注释还是比较...
登录控制和进度条实例代码ProgressBar
进度条实例应用(C#)
一个有问题的进度条实例
JAVA WEB Upload上传文件带进度条 实例 结果保存数据库 表结构 create table Upload ( id VARCHAR(50), fileName VARCHAR(50), pathName VARCHAR(1000), fileSize VARCHAR(50), createDate VARCHAR(50) );