SprintDevelop.com - Diseño y desarrollo web - Diseño, desarrollo web,Aplicaciones Móviles, TabletasSprintDevelop.com - Diseño y desarrollo web
Mostrando Codigo - Javascript
Code

Javascript - Barra de progreso - Carga de pagina

Códigos Javascript

Ayudado de hojas de estilo css, mostramos un efecto de barra de progreso mientras carga la pagina. Una vez cargada la barra de progreso redireccionamos a otra pagina. Debemos modificar la linea 35 con la url a donde queremos redirigir.
Visitas: 50,158 - 28/03/2004 9:28:52
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


# Codigo ofrecido por Tutores.org

  1. <HTML>
  2. <HEAD>
  3. <span style="font-weight: 700"><font face="Verdana" style="font-size: 15pt">
  4. Cargando pagina...<br>
  5. <br>
  6. </font></span>
  7. <center>
  8. <style>
  9. #barMv{
  10. POSITION:absolute;
  11. LEFT:0;
  12. TOP:0;
  13. BACKGROUND-COLOR:red;
  14. }
  15. #barBg{
  16. POSITION:absolute;
  17. LEFT:0;
  18. TOP:0;
  19. BACKGROUND-COLOR:white;
  20. BORDER:red 1px solid;
  21. COLOR:red;
  22. FONT-WEIGHT:bold;
  23. FONT-FAMILY: "Verdana, Arial";
  24. FONT-SIZE: 13px;
  25. }
  26. #prct{
  27. COLOR:white;
  28. FONT-WEIGHT:bold;
  29. FONT-FAMILY: "Verdana, Arial";
  30. FONT-SIZE: 13px;
  31. }
  32. </style><script language="JavaScript1.2">
  33. function postaction(){
  34. //Aqui definiriamos el redireccionamiento
  35. // window.location="http://www-tupagina.com"
  36. }
  37. var percent = 0
  38. var clipright=0
  39. var widthIE=0
  40. var widthNS=0
  41. function initializebar(){
  42. if (document.all){
  43. document.all.barMv.style.clip="rect(0 0 auto 0)"
  44. baranchor.style.visibility="visible"
  45. widthIE=barBg.style.pixelWidth
  46. startIE=setInterval("increaseIE()",200)
  47. }
  48. if (document.layers){
  49. widthNS=document.baranchorNS.document.barBgNS.clip.width
  50. document.baranchorNS.document.barMvNS.clip.right=0
  51. document.baranchorNS.visibility="show"
  52. startNS=setInterval("increaseNS()",200)
  53. }
  54. }
  55. function increaseIE(){
  56. percent = percent + 1
  57. if (percent > 100) percent = 100
  58. document.all.barMv.style.clip="rect(0 "+clipright+" auto 0)"
  59. document.all.barBg.innerHTML = percent + "%"
  60. document.all.prct.innerHTML = percent + "%"
  61. if (clipright<widthIE)
  62. clipright = Math.floor(widthIE * percent / 100)
  63. else{
  64. clearInterval(startIE)
  65. postaction()
  66. }
  67. }
  68. function increaseNS(){
  69. percent = percent + 1
  70. if (percent > 100) percent = 100
  71. if (clipright<baranchor.style.width){
  72. document.baranchorNS.document.barMvNS.clip.right=clipright
  73. clipright = Math.floor(widthNS * percent / widthNS)
  74. }
  75. else{
  76. clearInterval(startNS)
  77. postaction()
  78. }
  79. }
  80. </script></HEAD><BODY onload="initializebar();">
  81. </script><script language="JavaScript1.2">
  82. if (document.all){
  83. document.write('<DIV id="baranchor" style="position:relative;width:400px;height:20px; visibility:hidden;">')
  84. document.write('<div id="barBg" align=center style="width:400px;height:20px;z-index:9">0%</div>')
  85. document.write('<div id="barMv" align=center style="width:400px;height:20px;z-index:10">')
  86. document.write('<TABLE cellSpacing=0 cellPadding=0 border=0 width=400 height=20><TBODY>')
  87. document.write('<TR HEIGHT=20><TD Valign=middle ALIGN=center ID=prct>0%</TD></TR>')
  88. document.write('</TBODY></TABLE></DIV></DIV>')
  89. }
  90. </script><ilayer name="baranchorNS" visibility="hide" width=400 height=20><layer name="barBgNS" bgcolor=black width=400 height=20 z-index=10 left=0 top=0></layer>
  91. <layer name="barNS" bgcolor=red width=400 height=20 z-index=11 left=0 top=0></layer>
  92. </ilayer>
  93. <p dir="ltr"><font face="Verdana" size="2">Por favor sea paciente<span lang="fr-ca">...</span></font>
  94. </p>
  95. </BODY>
  96. </HTML>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Barra de progreso - Carga de pagina" href="http://www.tutores.org/codigo/995/" target="_blank">Barra de progreso - Carga de pagina</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
suso28
2 5
A ver esque si os fijais el código empieza con la etiqueta <head> y se cierra con la etiqueta </body>. ¿alguien que me responda al messenger , suso28_canibales@hotmail.com?
Comentario usuario
nanoemi003784
4 5
Fijate bien y vas a ver que se cierra el <head> en la linea 83

Saludos
Comentario usuario
29-01-2008 16:46:58
1 5
porque no redirecciona???:-(
Comentario usuario
19/04/2003
4 5
Hola
tienes que descomentar la linea
window.location="http://www-tupagina.com"
y modificar la url
saludos
Comentario usuario
03-08-2007 16:10:38
3 5
He intentado infinidad de veces agregar codigo JAVA en el <HEAD> y siempre, el forntpageexpress me lo vuelca al <BODY> con lo cual este tipo de aplicaciones no puedo hacer funcionar.

Me prodrian explicar cual es mi error
Comentario usuario
19/04/2003
3 5
Hola
Prueba editarlo con el editor de texto o Notepad
Muchas veces algunos editores no te permiten extructurar tu pagina como deseas.
Comentario usuario
03-08-2007 16:10:38
4 5
Tal como lo indicaron, he probado de editar el código en un editor de texto y funcionó.

Muchas gracias por su ayuda.
Comentario usuario
16-08-2009 00:42:33
2 5
cuando direcciono a una pagina siempre tarda unos 24 segundos aproximadamente para llegar al 100%... no es optimo
Comentario usuario
21-10-2007 04:44:53
3 5
tu script es una tonteria no sirve lo unico k hace es mostrar tu barra y despues te lo direcciona a la pagina y alli recien carga..... k cojudo eres
Comentario usuario
13/09/2004 2.47.47
4 5
y en el caso de querer utilizar una barra de progreso al momento que me logeo y me carga las paginas que puedo mostarr por cada usuario que podri hacer sirve tu ejemplo si puedes por favor responde gracias..
Comentario usuario
09-03-2010 20:05:25
3 5
oye supongo que la extension de este archivo es .css?
una pregunta un poco tonta pero quiero estar segura .
gracias
Comentario usuario
Disciple
2 5
Estimados amigos, una cosa es mostrar el progreso real de carga de una pagina y otra muy distinta es crear una animación de barra de progreso en javascript, la cual no esta vinculada realmente a ningun proceso de carga.Para hacer una barra de progreso como esta pero que realmente te se mueva por el porcentaje de KB cargados, solo se puede hacer con lenguajes de lado de servidor como pueden ser CGI o Perl, nunca en JavaScript.Un saludo, atte:Disciple, webmaster de...<a href="http://journemusic.com">Musica electronica</a>
Comentario usuario
21-10-2007 04:44:53
5 5
BUENO BUENO AKI SI K HAY PROBLEMA
Comentario usuario
21-10-2007 04:44:53
4 5
tu script es una tonteria no sirve lo unico k hace es mostrar tu barra y despues te lo direcciona a la pagina y alli recien carga..... k cojudo eres
Comentario usuario
daronwolff
1 5
Este script no sirve en FireFox Unicamente en el IExplorer.
La verdad agradesco tu aporte. Es muy interesante. No le hagas caso a esta bola de mal agradecidos.
Gracias.
Comentario usuario
Sin definir
4 5
el codigo del puta madre pero por alguna razón no funsiona en el safari
Comentario usuario
marx
5 5
como inserto tu codigo aqui, al hacer click en subir me tiene que aparecer tu parra de progreso

<input type="file" name="archivo" id="archivo" />
<input type="hidden" name="id" id="id" value="<?php echo $sid;?>" />
<input type="hidden" name="nombre" id="nombre" value="<?php echo $fx;?>" />
<input type="submit" value="Subir"/>
Comentario usuario
er tiottonto
4 5
las etiquetas se ponen en minuscula, nadie usa ya intternet explorer ya que ya hay muchos usuarios de linux y mac
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad


Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado

Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.