精美的 Loading 【进度条】

      源码 2005-9-29 2:25
<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 -->
</body>
</html>
标签集:TAGS:
回复Comments() 点击Count()

回复Comments

{commenttime}{commentauthor}

{CommentUrl}
{commentcontent}