精美的Loading进度条

王朝other·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

<html>

<head>

<SCRIPT type=text/javascript>

<!--

var ie5 = (document.all&&document.getElementsByTagName);

var step = 0;

function setSB(v, el, inforEl, message) {

if (ie5 || document.readyState == "complete") {

filterEl = el.children[0];

valueEl = el.children[1];

if (filterEl.style.pixelWidth > 0) {

var filterBackup = filterEl.style.filter;

filterEl.style.filter = "";

filterEl.style.filter = filterBackup;

}

filterEl.style.width = v + "%";

valueEl.innerText = v + "%";

inforEl.innerText = message;

}

}

function setSBByStep(v, el, inforEl, message) {

if (ie5 || document.readyState == "complete") {

step = step + v;

filterEl = el.children[0];

valueEl = el.children[1];

if (filterEl.style.pixelWidth > 0) {

var filterBackup = filterEl.style.filter;

filterEl.style.filter = "";

filterEl.style.filter = filterBackup;

}

filterEl.style.width = step + "%";

valueEl.innerText = step + "%"

inforEl.innerText = message;

}

}

window.onload = new Function("setSB(100,sb,infor,\'页面加载完毕\')")

function fakeProgress(v, el) {

if (v >= 100)

setSB(100, el, infor, "Loading Complete");

else {

setSB(v, el, infor, "Loading ...");

window.setTimeout("fakeProgress(" + (v + 1) + ", document.all[\'" + el.id + "\'])", 100);

}

}

//-->

</SCRIPT>

<!-- #EndEditable -->

</head>

<body bgcolor="#FFFFFF" leftmargin="20" topmargin="20" onload="fakeProgress(0, sb)">

<!-- Status Bar Starts -->

<div id=sb

style="BORDER-RIGHT: white 2px inset; BORDER-TOP: white 2px inset; BACKGROUND: white; BORDER-LEFT: white 2px inset; WIDTH: 200px; BORDER-BOTTOM: white 2px inset; HEIGHT: 20px; TEXT-ALIGN: left">

<div id=sbChild1

style="FILTER: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); WIDTH: 0%; POSITION: absolute; HEIGHT: 16px">

<div

style="FONT-SIZE: 1px; BACKGROUND: highlight; WIDTH: 100%; HEIGHT: 100%"></div>

</div>

<div

style="FONT-SIZE: 12px; WIDTH: 100%; COLOR: black; FONT-FAMILY: arial; POSITION: absolute; TEXT-ALIGN: center">0%</div>

</div>

<!-- Status Bar Ends -->

<div id=infor

style="FONT-SIZE: 12px; WIDTH: 100%; COLOR: black; FONT-FAMILY: arial; POSITION: relative; TEXT-ALIGN: center"></div>

<br>

<button onClick="fakeProgress(0, sb)">重新加载</button>

<!-- #EndEditable --></div>

</body>

</html>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航