Hola,
Yo lo haría con javascript.
para crear una barra con javascript es muy sencillo:
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
temporizador=1;
iteracioncadaXmilisegundos=1000; // cada 1 segundo - 1000 milisegundos se incrementa la barra
milisegundosMaximo=10000; // a los 10 segundos 10000 milisegundos el intervalo se para.
var myInterval = window.setInterval
(
function (a,b)
{
temporizador+=10;
document.getElementById("barra").style.width=temporizador+"px";
}
,iteracioncadaXmilisegundos
);
window.setTimeout
(
function (a,b)
{
document.getElementById("barra").style.background="red";
clearInterval(myInterval);
}
,milisegundosMaximo
);
</script>
</HEAD>
<BODY>
<span id="barra" style="display:block;background-color:black;width:0px;" ></span>
</BODY>
</HTML> Lo que pasa es que a la carga de página tienes que coger de la base de datos o de dónde esté la información de tiempo restante y configurar el intervalo de javascript.
Por ejemplo si al cargar la página quedan 30 minutos y quieres que la barra aumente cada minuto
Código HTML:
iteracioncadaXmilisegundos=60*1000;
milisegundosMaximo=30*60*1000;
Con esto ya tendrias un punto de partida.
Ajax, bueno ajax sería llamar a un script en php que te devuelva cuando tiempo queda, pero si configuras el clearInterval al cargar la página lo mismo ni hace falta.
Esto que te pongo es sólo un punto de partida que seguramente tendrás que toquetear.
(yo no soy un experto en javascript lo mismo no es la forma más correcta de hacerlo pero lo mismo te sirve de algo)
Un saludo.