barra de carga de pagina web

[euge01_84]

Hola!! hace poco empeze con diseño web y estoy rediseñando una pagina de la cual estoy buscando el modo de que cuando entro a la misma me aparesca una barra de carga.
Algo lei sobre el ajax, me descargue un gif pero nose que tengo que hacer para programarlo, cuales son los codigos que tengo que generar para que funcione... estoy usando el dreamweaver. Si alguien me puede ayudar se los agradeceria mucho!!

[networktools]

copiar y pegar

<style>
<!--
.hide { position:absolute; visibility:hidden; }
.show { position:absolute; visibility:visible; }
-->
</style>

<SCRIPT LANGUAGE="JavaScript">

//Progress Bar script- by Todd King ([email protected])
//Modified by JavaScript Kit for NS6, ability to specify duration
//Visit JavaScript Kit (http://javascriptkit.com) for script

var duration=3 // Specify duration of progress bar in seconds
var _progressWidth = 50; // Display width of progress bar.

var _progressBar = "||||||||||||||||||||||||||||||||||||||||||||||||| |||||||||||||||||||||||||||||||||||||||||||||||||| ||||||||||||||||||||"
var _progressEnd = 5;
var _progressAt = 0;


// Create and display the progress dialog.
// end: The number of steps to completion
function ProgressCreate(end) {
// Initialize state variables
_progressEnd = end;
_progressAt = 0;

// Move layer to center of window to show
if (document.all) { // Internet Explorer
progress.className = 'show';
progress.style.left = (document.body.clientWidth/2) - (progress.offsetWidth/2);
progress.style.top = document.body.scrollTop+(document.body.clientHeigh t/2) - (progress.offsetHeight/2);
} else if (document.layers) { // Netscape
document.progress.visibility = true;
document.progress.left = (window.innerWidth/2) - 100+"px";
document.progress.top = pageYOffset+(window.innerHeight/2) - 40+"px";
} else if (document.getElementById) { // Netscape 6+
document.getElementById("progress").className = 'show';
document.getElementById("progress").style.left = (window.innerWidth/2)- 100+"px";
document.getElementById("progress").style.top = pageYOffset+(window.innerHeight/2) - 40+"px";
}

ProgressUpdate(); // Initialize bar
}

// Hide the progress layer
function ProgressDestroy() {
// Move off screen to hide
if (document.all) { // Internet Explorer
progress.className = 'hide';
} else if (document.layers) { // Netscape
document.progress.visibility = false;
} else if (document.getElementById) { // Netscape 6+
document.getElementById("progress").className = 'hide';
}
}

// Increment the progress dialog one step
function ProgressStepIt() {
_progressAt++;
if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd;
ProgressUpdate();
}

// Update the progress dialog with the current state
function ProgressUpdate() {
var n = (_progressWidth / _progressEnd) * _progressAt;
if (document.all) { // Internet Explorer
var bar = dialog.bar;
} else if (document.layers) { // Netscape
var bar = document.layers["progress"].document.forms["dialog"].bar;
n = n * 0.55; // characters are larger
} else if (document.getElementById){
var bar=document.getElementById("bar")
}
var temp = _progressBar.substring(0, n);
bar.value = temp;
}

// Demonstrate a use of the progress dialog.
function Demo() {
ProgressCreate(10);
window.setTimeout("Click()", 100);
}

function Click() {
if(_progressAt >= _progressEnd) {
ProgressDestroy();
return;
}
ProgressStepIt();
window.setTimeout("Click()", (duration-1)*1000/10);
}

function CallJS(jsStr) { //v2.0
return eval(jsStr)
}

</script>

<SCRIPT LANGUAGE="JavaScript">

// Create layer for progress dialog
document.write("<span id=\"progress\" class=\"hide\">");
document.write("<FORM name=dialog id=dialog>");
document.write("<TABLE border=2 bgcolor=\"#FFFFCC\">");
document.write("<TR><TD ALIGN=\"center\">");
document.write("Progress<BR>");
document.write("<input type=text name=\"bar\" id=\"bar\" size=\"" + _progressWidth/2 + "\"");
if(document.all||document.getElementById) // Microsoft, NS6
document.write(" bar.style=\"color:navy;\">");
else // Netscape
document.write(">");
document.write("</TD></TR>");
document.write("</TABLE>");
document.write("</FORM>");
document.write("</span>");
ProgressDestroy(); // Hides

</script>


<form name="form1" method="post">
<center>
<input type="button" name="Demo" value="Display progress" onClick="CallJS('Demo()')">
</center>
</form>

<a href="javascript:CallJS('Demo()')">Text link example</a>

<p align="center">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript
Kit</a></p>

[euge01_84]

Hola gracias por tu respuesta, pero donde tengo que pegar este codigo?

[networktools]

en la página donde quieras que se muestre la barra.. pero deberí de ser una antes de la principal para que quede bien... y de esta pones
<META HTTP-EQUIV="Refresh" CONTENT="3; URL=http://www.midominio.com/lapaginaquesea.html">

[euge01_84]

no hay caso.... arme un archivo html nuevo y pegue el primer codigo que me mandaste, y luego pegue el último con la modificación en la URL.. pero no me aparece nada...

[JavierB]

Hola euge01_84

Muevo tu tema al foro de Javascript desde Web general.

Saludos,