Ver Mensaje Individual
  #9 (permalink)  
Antiguo 16/08/2011, 19:46
keyvin2012
 
Fecha de Ingreso: agosto-2011
Ubicación: Caracas
Mensajes: 6
Antigüedad: 10 años, 2 meses
Puntos: 1
Respuesta: Barra De Progreso Javascript

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

Código PHP:
Ver original
  1. <?php
  2. echo time().'<br />'; // usado opcional para conseguir time
  3. date_default_timezone_set('America/Caracas');
  4. $tiempo_guardado = 1313544885; // time usado para el ejemplo el original se guarda en base de datos
  5. $segundos_requeridos = 120;
  6. $tiempo_suma = ($tiempo_guardado + $segundos_requeridos);
  7. $tiempo_inicio = $tiempo_suma-time();
  8. ?>

Código Javascript:
Ver original
  1. <script>
  2. var tiempo_inicio = <?php echo $tiempo_inicio; ?>;
  3. var tiempo_final = <?php echo $segundos_requeridos; ?>;
  4. var barra_width = 194;
  5. function minutos_restantes() {
  6. tiempo_inicio -= 1;
  7. var minutos = Math.floor(tiempo_inicio / 60);
  8. var segundos = tiempo_inicio % 60;
  9. var restante = Math.floor(tiempo_final - tiempo_inicio);
  10. var progreso = Math.floor((barra_width * restante) / tiempo_final);
  11. var porc = Math.floor(progreso / 2);
  12. if(segundos < 10) {
  13. segundos = '0' + segundos;
  14. } else if (minutos < 10) {
  15. minutos = '0' + minutos;
  16. }
  17. if(tiempo_inicio <= 0) {
  18. document.getElementById('div_tiempo').innerHTML = '00:00';
  19. document.getElementById('barra-cargando').style.width = barra_width + "px";
  20. document.getElementById('pocentaje-cargando').innerHTML = "100%";
  21. //setTimeout("location.href=" + document.URl);
  22. } else {
  23. document.getElementById('div_tiempo').innerHTML = minutos + ':' + segundos;
  24. document.getElementById('barra-cargando').style.width = progreso + "px";
  25. document.getElementById('pocentaje-cargando').innerHTML = porc + "%";
  26. }
  27. }
  28. setInterval('minutos_restantes();',1000);
  29. </script>

Código CSS:
Ver original
  1. <style>
  2. #cuadro-cargando {
  3.     position: relative;
  4.     background: -moz-linear-gradient(top,#58acfa,#2e9afe,#0080ff,#2e9afe,#58acfa);
  5.     width: 200px;
  6.     height: 40px;
  7.     top: 15px;
  8.     margin: auto;
  9.     border: 0px solid transparent !important;
  10.     border-radius: 4px;
  11.     box-shadow: 0 0 4px #084b8a;
  12. }
  13.  
  14. #cuadro-cargando-fondo {
  15.     position: relative;
  16.     background: #0080ff;
  17.     width: 196px;
  18.     height: 35px;
  19.     top: 2px;
  20.     margin: auto;
  21.     border: 0px solid transparent !important;
  22.     border-radius: 4px;
  23.     box-shadow: inset 0 0 1px 1px #084b8a;
  24. }
  25.  
  26. #barra-cargando {
  27.     position: relative;
  28.     background: -moz-linear-gradient(top,#58acfa,#2e9afe,#0080ff,#2e9afe,#58acfa);
  29.     width: 1%;
  30.     max-width: 200px;
  31.     height: 33px;
  32.     border: 0px solid transparent !important;
  33.     border-radius: 4px;
  34.     box-shadow: 0 0 4px #084b8a;
  35.     top: 1px;
  36.     left: 1px;
  37.     -moz-transition-duration: 0.5s;
  38. }
  39.  
  40. #pocentaje-cargando {
  41.     position: relative;
  42.     top: -30px;
  43.     left: 75px;
  44.     width: 99.4%;
  45.     height: 97.2%;
  46.     color: #084b8a;
  47.     font-family: arial;
  48.     font-style: oblique;
  49.     font-size: 25px;
  50.     text-shadow: 0 1px 1px #ebebeb;
  51. }
  52. </style>

Código HTML:
Ver original
  1. <center><span id="div_tiempo"></span></center>
  2. <div id="cuadro-cargando">
  3. <div id="cuadro-cargando-fondo">
  4. <div id="barra-cargando"></div>
  5. <div id="pocentaje-cargando"></div>
  6. </div>
  7. </div>

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

gracias saludos desde venezuela