Barra De Progreso Javascript

[keyvin2012]

Hola Amigo te cuento que logre lo que queria de la siguiente forma

Código PHP:

<?php
echo time().'<br />'; // usado opcional para conseguir time 
date_default_timezone_set('America/Caracas');
$tiempo_guardado = 1313544885; // time usado para el ejemplo el original se guarda en base de datos
$segundos_requeridos = 120;
$tiempo_suma = ($tiempo_guardado + $segundos_requeridos);
$tiempo_inicio = $tiempo_suma-time();
?>
 

Código Javascript:

<script>
var tiempo_inicio = <?php echo $tiempo_inicio; ?>;
var tiempo_final = <?php echo $segundos_requeridos; ?>;
var barra_width = 194;
function minutos_restantes() {
tiempo_inicio -= 1;
var minutos = Math.floor(tiempo_inicio / 60);
var segundos = tiempo_inicio % 60;
var restante = Math.floor(tiempo_final - tiempo_inicio);
var progreso = Math.floor((barra_width * restante) / tiempo_final);
var porc = Math.floor(progreso / 2);
if(segundos < 10) {
segundos = '0' + segundos;
} else if (minutos < 10) {
minutos = '0' + minutos;
}
if(tiempo_inicio <= 0) {
document.getElementById('div_tiempo').innerHTML = '00:00';
document.getElementById('barra-cargando').style.width = barra_width + "px";
document.getElementById('pocentaje-cargando').innerHTML = "100%";
//setTimeout("location.href=" + document.URl);
} else {
document.getElementById('div_tiempo').innerHTML = minutos + ':' + segundos;
document.getElementById('barra-cargando').style.width = progreso + "px";
document.getElementById('pocentaje-cargando').innerHTML = porc + "%";
}
}
setInterval('minutos_restantes();',1000);
</script>
 

Código CSS:

<style>
#cuadro-cargando {
    position: relative;
    background: -moz-linear-gradient(top,#58acfa,#2e9afe,#0080ff,#2e9afe,#58acfa);
    width: 200px;
    height: 40px;
    top: 15px;
    margin: auto;
    border: 0px solid transparent !important;
    border-radius: 4px;
    box-shadow: 0 0 4px #084b8a;
}
 
#cuadro-cargando-fondo {
    position: relative;
    background: #0080ff;
    width: 196px;
    height: 35px;
    top: 2px;
    margin: auto;
    border: 0px solid transparent !important;
    border-radius: 4px;
    box-shadow: inset 0 0 1px 1px #084b8a;
}
 
#barra-cargando {
    position: relative;
    background: -moz-linear-gradient(top,#58acfa,#2e9afe,#0080ff,#2e9afe,#58acfa);
    width: 1%;
    max-width: 200px;
    height: 33px;
    border: 0px solid transparent !important;
    border-radius: 4px;
    box-shadow: 0 0 4px #084b8a;
    top: 1px;
    left: 1px;
    -moz-transition-duration: 0.5s;
}
 
#pocentaje-cargando {
    position: relative;
    top: -30px;
    left: 75px;
    width: 99.4%;
    height: 97.2%;
    color: #084b8a;
    font-family: arial;
    font-style: oblique;
    font-size: 25px;
    text-shadow: 0 1px 1px #ebebeb;
}
</style>
 

Código HTML:

<center><span id="div_tiempo"></span></center>
<div id="cuadro-cargando">
<div id="cuadro-cargando-fondo">
<div id="barra-cargando"></div>
<div id="pocentaje-cargando"></div>
</div>
</div>
 

me funciona bien lo dejo para el que lo necesite probado en firefox 5.0.1 y funciona perfect

gracias saludos desde venezuela