iGuest 3 Report post Posted January 10, 2005 Paste this script below between <head> and </head> <script type="text/javascript">var ua = window.navigator.userAgent;var ie = /msie [56789]/i.test(ua);var ie5 = /msie 5.0/i.test(ua);var timer;function progressorbar() {};progressorbar.dir = 1;progressorbar.width = 300;progressorbar.height = 90;progressorbar.timer;progressorbar.fixpostion = function(){ var w = document.body.clientWidth || window.innerWidth; var h = document.body.clientHeight || window.innerHeight; var x = document.body.scrollLeft; var y = document.body.scrollTop; var l = x + parseInt((w - progressorbar.width)/2); var t = y + parseInt((h - progressorbar.height)/2); return { "left": l, "top": t }}progressorbar.initialize = function(){ var x=progressorbar.fixpostion(); var sHTML ='<div id="WebProgessorBar" style="z-index:999999;background:ThreeDFace;border:2px outset;-moz-border-left-colors:ThreeDLightShadow ThreeDHighLight;-moz-border-right-colors:ThreeDDarkShadow THreeDShadow;-moz-border-top-colors:ThreeDLightShadow ThreeDHighLight;-moz-border-bottom-colors:ThreeDDarkShadow ThreeDShadow;width:'; sHTML = sHTML + progressorbar.width + 'px;height:' + progressorbar.height + 'px;left:' + x.left + 'px;top:' + x.top + 'px;position:absolute">'; sHTML = sHTML + '<table cellspacing=1 cellpadding=0 border=0 width=100% height=100% align=center><tr><td style="height:20px;vertical-align:top;text-align:left">'; sHTML = sHTML + '<div id="WPB_Title" style="padding:2px 0px 0px 2px;height:20px;overflow:hidden;background:ActiveCaption;font:Caption;color:CaptionText">Loading...</div>'; sHTML = sHTML + '</td></tr><tr><td style="text-align:center;vertical-align:'+(ie5?"top":"middle")+'"><div align=center>'; sHTML = sHTML + '<div style="width:80%;height:20px;border:1px solid ThreeDShadow;background:window;overflow:hidden;text-align:left;padding:1px;font-size:0px;-moz-appearance:progressbar">'; sHTML = sHTML + '<div style="width:60px;height:16px;position:relative;left:0px;background:HighLight;overflow:hidden;-moz-appearance:progresschunk;font-size:0px"> </div></div></div></td></tr></table></div>'; document.write(sHTML); progressorbar.WPstart();}progressorbar.move = function(){ var p = document.getElementById("WebProgessorBar"); var v = p.getElementsByTagName("div")[2].firstChild; var l = parseInt(v.style.left); if (progressorbar.dir==1 && l >= v.parentNode.offsetWidth) progressorbar.dir = -1; else if (l <= -v.offsetWidth) progressorbar.dir = 1; v.style.left = l + progressorbar.dir * 2; if (ie) v.style.filter = "Alpha(" + (progressorbar.dir > 0 ? "Opacity=0,FinishOpacity=100" : "Opacity=100,FinishOpacity=0") + ",Style=1,StartX=0,StartY=0,FinishX=100,FinishY=0);"}progressorbar.WPstart = function (){ var p = document.getElementById("WebProgessorBar"); if(p){ p.style.display=""; timer=window.setInterval(progressorbar.move,1); }}progressorbar.WPstop = function(){ var p = document.getElementById("WebProgessorBar"); if(p){ p.style.display="none"; clearInterval(timer); }}function progressorbar.setWPTitle(sTitle){ var t = document.getElementById("WPB_Title"); if(t){ t.innerText=sTitle; }}</script>Paste this script below after <body> tag. <script type="text/javascript">progressorbar.initialize()</script>If you want to hide it,you can run the script <script type="text/javascript">progressorbar.WPstop()</script> You can get a demo here.Also you can modify the script.I have tested the page in IE6 and Firefox in windows. http://forums.xisto.com/no_longer_exists/ Share this post Link to post Share on other sites
iGuest 3 Report post Posted January 10, 2005 Always I use it when my page is loading or geting some data from another page.You can see my another page here.http://forums.xisto.com/no_longer_exists/It's Chinese.It's used for weather forecast.You can find the progressorbar when the page is loading and if you click the first button to get the weather data.There are something wrong when you click the 2nd button.And this page can't work well in mozilla.I will ameliorate it when I free. Share this post Link to post Share on other sites
iGuest 3 Report post Posted January 17, 2005 it's not so cooll,anyway I really need it,,thank you :wink: Share this post Link to post Share on other sites
iGuest 3 Report post Posted January 18, 2005 the script is nice, but (how) can i customize the loading bar ???And please explain me how can i run the script from a file. I know something, but very few ...I think i must save the main code in smth like script.js and then to call the script from that file, but i don't know how. Please explain me ...Thanks. Share this post Link to post Share on other sites
iGuest 3 Report post Posted January 19, 2005 thank you!let me test it. Share this post Link to post Share on other sites
