Barra cargando pagina tipo loading... ¿como puedo hacer una Barra de esas de tipo cargando (loading) o una carga con porciento en javascript?
si alguin sabe favor de explicrme, o mejor
si tienen algunas ya por ahi que quieran compartir, no estaria mal... 
aqui les dejo uno que baje de una pagina, pero casi no me gusta.
lo puse en esta pagina entra para ver el >>>EJEMPLO<<<
1.primero introduscan el sigiente <style type> y el <script language> entre <head>aqui</head> tal como esta en el sig. ejemplo.
<html>
<head>
<title>cargando</title>
<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:#ffffff; layer-background-color:#ffffff;}
#divLoad1 {position:absolute; layer-background-color:silver; background-color:silver;}
#divLoad2 {position:absolute; left:0px; top:0px; layer-background-color:navy; background-color:navy;}
#divLoadText {position:absolute; background-color:transparent; font-family:arial,helvetica,sans-serif; color:navy; font-size:14px;}
</style>
<script language="JavaScript" type="text/javascript">
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.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.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.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()
/*VARIABLES TO SET START: */
numImages = 10 //How many images you have in your page
loaderWidth = 300 //The width of the loadbar
/* Poner el Onload que pone a continuacion a todos lo img incluidos en la pagina web
<img src="whatever.gif" width="10" border="0" height="10" onload="loadIt(1)">
VARIABLES TO SET END: */
// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";
currentImg = 0
//Document size object ********
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; this.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 = r;
this.css.pixelHeight = b;
this.css.width = r+px;
this.css.height = b+px;
}
}
}
var oLoad2
function startLoading(){
page = new lib_doc_size()
oLoadCont = new lib_obj('divLoadCont')
oLoad = new lib_obj('divLoad1','divLoadCont')
oLoad2 = new lib_obj('divLoad2','divLoadCont.document.divLoad1' )
oLoadText = new lib_obj('divLoadText','divLoadCont.document.divLoa d1')
oLoad.moveIt(page.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){
currentImg ++
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 READY
function 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>
<style>
<!--
#tickertape{
position:relative;
layer-background-color:black;
width:400;
height:12;
}
#subtickertape{
background-color:black;
position:absolute;
border: 1px solid black;
width:400;
height:12;
}
.subtickertapefont{
font:bold 12px Verdana;
text-decoration:none;
color:white;
}
.subtickertapefont a{
color:white;
text-decoration:none;
}
-->
</style>
</head>
2. Despues introduscan el siguiente entre <body>aqui</body>
<body>
<div id="divLoadCont">
<div id="divLoad1">
<div id="divLoad2"></div><br>
<div id="divLoadText">Loading...</div>
</div>
</div>
<script>
startLoading()
//onload=loadIt;
loadIt_display(1)
</script>
3. Por último toda su página web.... y todos los gráficos que incluya en su web pongale la siguiente etiqueta onLoad ... como viene en el ejemplo. ...
<img src="foto11_ch.gif" width="100" border="0" height="150" onload="loadIt(1)">
</body></html>
*ese archivo de la imagen "foto11-ch.gif" es un ejemplo utilicen otra que tengan en su directorio donde estan guardando todo lo de su sitio que estan creando...
*recuerden que este es solo un ejemplo que consegui, pero me gustaria que mandaran algunos otros....
