进度条实例

<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>

猜你喜欢