Tip: you can modify some code before running
<html><head><title>: Ajax loading effect code ::</title><SCRIPT LANGUAGE="JavaScript">Window. defaultStatus = "LoadingBar ";</sCRIPT><STYLE TYPE="text/css">BODY {scrollbar-face-color: #0069B3; scrollbar-shadow-color: #000000; scrollbar-highlight-color: # FFFFFF; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #0069B3; scrollbar-arrow-color: # FFCC00 ;}</sTYLE><style type="text/css"># DivLoadCont {position: absolute; z-index: 500; left: 0px; top: 0px; width: 100%; height: 98%; clip: rect (0px 100% 100% 0px ); background-color: #0069B3; layer-background-color: # ffffff;} # divLoad1 {position: absolute; layer-background-color: silver; background-color: # EEEEEE ;} # divLoad2 {position: absolute; left: 0px; top: 0px; layer-background-color: navy; background-color: # DCDCDC;} # divLoadText {position: absolute; background-color: transparent; font-family: courier new, verdana, arial, helvetica, sans-serif; font-weight: bold; color: #0069B3; font-size: 18px ;}</style><script language="JavaScript" type="text/javascript">/*************************************** **************************************** * ** LoadingBar * Copyright (C) 2001 Thomas Brattli * This script was released at DHTMLCentral.com * Visit for more great scripts! * This may be used and changed freely as long as this msg is intact! * We will also appreciate any links you coshould give us. ** Made by Thomas Brattli ********************************** **************************************** * *****/function lib_bwcheck () {// Browsercheck (needed) this. ver = navigator. appVersionthis. agent = navigator. userAgentthis. dom = document. getElementById? 1: 0this. opera5 = this. agent. indexOf ("Opera 5")>-1this. ie5 = (this. ver. indexOf ("MSIE 5")>-1 & this. dom &&! This. opera5 )? 1:0; this. ie6 = (this. ver. indexOf ("MSIE 6")>-1 & this. dom &&! This. opera5 )? 1:0; this. ie4 = (document. all &&! This. dom &&! This. opera5 )? 1:0; this. ie = this. ie4 | this. ie5 | this. ie6this. mac = this. agent. indexOf ("Mac")>-1this. ns6 = (this. dom & parseInt (this. ver)> = 5 )? 1:0; this. ns4 = (document. layers &&! This. dom )? 1:0; this. bw = (this. ie6 | this. ie5 | this. ie4 | this. ns4 | this. ns6 | this. opera5) return this} var bw = new lib_bwcheck () numImages = 20 loaderWidth = 250var px = bw. ns4 | window. opera? "": "Px"; currentImg = 0 function lib_doc_size () {this. x = 0; this. x2 = bw. ie & document. body. offsetWidth-20 | innerWidth | 0; this. y = 0; this. y2 = bw. ie & document. body. offsetHeight-5 | innerHeight | 0; if (! This. x2 |! This. y2) return message ('document has no width or height') this. x50 = this. x2/2; this. y50 = this. y2/2; return this;} // Lib objects ************************ function lib_obj (obj, nest) {nest = (! Nest )? "": 'Document. '+ nest +'. 'This. evnt = bw. dom? Document. getElementById (obj): bw. ie4? Document. all [obj]: bw. ns4? Eval (nest + "document. layers." + obj): 0; this.css = bw. dom | bw. ie4? This. evnt. style: this. evnt; this.ref?this.css this. w = this. evnt. offsetWidth | this.css. clip. width | this. ref. width | this.css. pixelWidth | 0; return this} // Moving object to *************** lib_obj.prototype.moveIt = function (x, y) {this. x = x; this. y = y; this.css. left = x + px; this.css. top = y + px;} // Clipping object to ***** lib_obj.prototype.clipTo = function (t, r, B, l, setwidth) {this. ct = t; this. cr = r; this. cb = B; thi S. cl = l if (bw. ns4) {this.css.clip.top?t=this.css. clip. right = r this.css.clip.bottom? B =this.css. clip. left = l} else {if (t <0) t = 0; if (r <0) r = 0; if (B <0) B = 0; if (B <0) B = 0 this.css. clip = "rect (" + t + "px" + r + "px" + B + "px" + l + "px)"; if (setwidth){{this.css. pixelWidth = rw.this.css. pixelHeight = bw.this.css. width = r + px; this.css. height = B + px ;}}var oLoad2function startLoading () {page = new lib_doc_size () oLoadCont = new Lib_obj ('divloadcont') oLoad = new lib_obj ('divload1', 'divloadcont') oLoad2 = new lib_obj('divload2', 'divloadcont.doc ument. divLoad1 ') oLoadText = new lib_obj('divloadtext', 'divloadcont.doc ument. divLoad1 ') oLoad. moveIt (page. A x50-loaderWidth/2, page. y50-20) oLoadText. moveIt (loaderWidth/2-oLoadText. w/2, 10) oLoad. clipTo (0, loaderWidth, 40, 0, 1) oLoad2.per = loaderWidth/numImages} function loadIt (OK) {cur RentImg ++ if (oLoad2) oLoad2.clipTo (0, oLoad2.per * currentImg, 40, 0, 1) if (! OK) {oLoadCont.css. visibility = "hidden" oLoadCont = null; oLoad1 = null; oLoad2 = null ;}} // display function-delete start -------- delete this *************** // leave this function while testing. delete when READYfunction loadIt_display (OK) {currentImg ++ if (oLoad2) oLoad2.clipTo (0, oLoad2.per * currentImg, 40, 0, 1) if (currentImg <= numImages) setTimeout ("loadIt_display (1)", 200) else {oLoadCont.css. visibility = "hidden" }}// display function-delete end ************************** ***********</script></head><body bgcolor="#0069B3"><div id="divLoadCont"> <div id="divLoad1"> <div id="divLoad2"></div><br> <div id="divLoadText">Loading...</div> </div></div><script>startLoading()loadIt_display(1) //LEAVE THIS LINE WHILE TESTING. DELETE WHEN READY</script><br><br><br><center><font face="verdana" size="2" color="#FFFFFF">Chargement de la page termin ?..</font><BR><hr color="#6F8DD9" width="218"></center></body></html>
Tip: you can modify some code before running