Barra Temporizadora

Este efecto se consigue mediante tres bloques div, con posicion definida por estilos y modificar el tamaño de uno de ellos en función de un temporizador (setTimeout). Es necesario utilizar estilos, pues mediante su modificación con javascript conseguiremos el efecto deseado.

Espera mientras se ejecuta ...
 

Estilos

.CapaFondo {
	position:relative;
	left: 0px;
	top: 0px;
	visibility:hidden;
	width: 300px;
	height: 100px;
	background-color: #FDF5E6;
	font-weight: bold;
	border: 3px ridge black;
	text-align: center;
	padding: 10px;
}

.Barra {
	position:absolute;
	left: 50px;
	top: 60px;
	visibility: hidden;
	width: 200px;
	height: 20px;
	background-color: #AAAAAA;
	text-align: left;

Código JavaScript

var Doc=window.document;
function Mensaje(Tiempo)
{
Doc.getElementById("Capa3").style.left=0;
Doc.getElementById("Capa3").style.top=0;
Doc.getElementById("Capa3").style.width=5;
Doc.getElementById("Capa3").style.background="blue";
Doc.getElementById("Capa1").style.visibility="visible";
Doc.getElementById("Capa2").style.visibility="visible";
Doc.getElementById("Capa3").style.visibility="visible";
setTimeout("Puntos()",Tiempo);
}

function Puntos(Tiempo) 
{
var ancho=parseInt(Doc.getElementById("Capa3").style.width);
if (ancho<200)
	 Doc.getElementById("Capa3").style.width=ancho+1;
	{
	 Doc.getElementById("Capa3").style.width=ancho+1;
	setTimeout("Puntos()",Tiempo);
	}
else
	Oculta();
//  Doc.getElementById("Capa3").style.width=5; 	//Reiniciaria el proceso
}

function Oculta()
{
Doc.getElementById("Capa1").style.visibility="hidden";
Doc.getElementById("Capa2").style.visibility="hidden";
Doc.getElementById("Capa3").style.visibility="hidden";
}
}

Código HTML

...
<table width="80%">
<tr><td align="center">
  <div id="Capa1" class="CapaFondo">Espera mientras se ejecuta ...<br> 
    <div id="Capa2" class="Barra">
  	  <div id="Capa3" class="Barra"></div></div></div>
</td></tr>
</table>
...