Como hago para hacer una barra de progreso que calcule los dias y cuando llegue el dia destino, llegue a 100%?[Unresolved]

Answers:

•  

    0  

   

   

  Txema Artzain Karma: 3097

   
  Date: 08-12-2018 20:13:34 Hola Francisco:
  
  La forma más sencilla es conjugando el valor porcentual del tiempo transcurrido sobre el tiempo total y aplicarle a la barra (imagen o div con un color de fondo) que generes la propiedad clip de CSS.
  
  Dicha propiedad contiene cuatro valores
  Por ejemplo, desde una imagen de la barra de 100 px de largo y 20 px de alto, posicionas la imagen ( IMPORTANTE, position: absolute ) que puede estar dentro de otro div con posición relativa, para ubicarlo donde quieras dentro de la página
  
  XX será el valor en píxeles correspondiente al valor porcentual
  CSS:
  

  <style> 
  #mydiv {
      position:relative;
      width: XXpx;
      height: 20px;
      background-color: coral;
  }
  img {
      position: absolute;
      clip: rect(0px,100px,20px,0px);
  }
  </style>

  
  
  HTML en línea
  

  <div id="" style="position:relative;height:15px;">
  	<div style="position:absolute;clip:rect(0, XXpx, 20px, 0);">
  		<img src="img/iconos/escala-color.png" alt="Escala Color">
  	</div>
  </div>

  
  
  Desde el enlace puedes ver cómo conjugarlo con Javascript al que aplica un fondo de color   Votes: 0 - Link answer
   
•  

    0  

   

   

  Jorge Zabala Karma: 517

   
  Date: 11-12-2018 09:42:12 Creo que quedo como lo necesitas.
  
  
  

  $startDate = "08-12-2018";
  $endDate = "20-12-2018";
  $eventDays = ['Monday', 'Wednesday'];
  
  $startDate = new DateTime($startDate);
  $endDate = new DateTime($endDate);
  $currentDate = new DateTime();
  
  $progress = 0;
  
  if($currentDate >= $startDate){
  	$totalDays = 0;
  	$pastDays = 0;
  
  	while($startDate <= $endDate){
  		if(in_array(date('l', strtotime($startDate->format('d-m-Y'))), $eventDays)){
  			$totalDays++;
  			if($currentDate >= $startDate) $pastDays++;
  		}
  		$startDate->modify('+1 day');
  	}
  
  	$progress = round($pastDays * 100 / $totalDays, 2);
  }

  
  
  

  <h2>Progress Bar Event | <?php echo $startDate->format('d/m/Y').' - '.$endDate->format('d/m/Y'); ?></h2>
  	<p style="width:<?php echo $progress; ?>%" data-value="<?php echo $progress; ?>">Event progress:</p>
  	<progress max="100" value="<?php echo $progress; ?>" class="html5">
  		<div class="progress-bar">
  			<span style="width: <?php echo $progress; ?>%"><?php echo $progress; ?>%</span>
  		</div>
  	</progress>

  
  
  Revisa el siguiente enlace:
  http://zeusafk.net/phpcentral/1678/   Votes: 0 - Link answer