1

buenas a todos tengo un problema o mejor dicho una duda estado investigando en Internet como colocar una progress bar. y todos usan el metodo de style dandole el porcentaje desde el mismo. yo quisiera agregarle un progress bar a mi codigo hecho en php si alguien me puede apoyar. se lo agradeceria.

introducir la descripción de la imagen aquí

como ven en la imagen en mi %total tiempo ya muestra el %. ahora quisiera mostrar ese porcentaje con un progress bar.

intente mostrarlo pero solo me toma un registro.

<br><br>
    <div class="barra">
        <div class="progreso"><div class="porcentaje"></div></div>
    </div>

  <script type="text/javascript">
    document.getElementsByClassName("progreso")[0].style.width = "<?php echo $porcentaje; ?>%";
    document.getElementsByClassName("porcentaje")[0].innerHTML = "<?php echo $porcentaje; ?>%";
</script>
<?php
@ob_flush();
flush();
$total = substr($user->finish, 0, 4)  -substr($user->start, 0, 4) + 1;
$current = substr($user->diasf, 0, 4);
$porcentaje = ($current/$total) * 100;
$porcentaje = round($porcentaje, 0); 
    ?>

 <?php
@ob_flush();
flush();
usleep(500);?>

introducir la descripción de la imagen aquí

 <thead>
 
      <th style=""; class="button-3"> Persona Asignada</th>
      <th style=""; class="button-4"> Tarea</th>
      <th style=""; class="button-3">Descripcion</th>
      <th style=""; class="button-3">Dias Asignados</th>
      <th style=""; class="button-3">Dia Finalizado</th>
      <th style=""; class="button-3">% Total tiempo</th>
      
      </thead>
      <?php
      foreach($users as $user){
        ?>
        <tr>
          
      
          <td class="bg-info text-white" style="color:#070001"><?php echo substr($user->persona, 0, 200);; ?></td>
        <td class="bg-info text-white" style="color:#070001"><?php echo substr($user->title, 0, 200);; ?></td>
        <td class="bg-info text-white" style="color:#070001"><?php echo substr($user->description, 0, 200);; ?></td>
        <td class="bg-info text-white" style="color:#070001"><?php echo  substr($user->finish, 0, 200)-substr($user->start, 0, 200) + 1;; ?> Dias</td>
        <td class="bg-info text-white" style="color:#070001"><?php echo substr($user->diasf, 0, 200);; ?> Dias</td>
        <td class="bg-info text-white" style="color:#070001"> 


        <?php 
$total = substr($user->finish, 0, 4)  -substr($user->start, 0, 4) + 1;
$current = substr($user->diasf, 0, 4);
$percent = ($current/$total) * 100;
$percent = round($percent, 0); 

// echo "$current es $percent% of $total.
// <p />";

?>

introducir la descripción de la imagen aquí

1
  • Debes actualizar la pregunta para poner el código con el que creas las barras, de otra forma va a ser imposible ayudarte.
    – Triby
    Commented el 30 nov. 2021 a las 23:22

2 respuestas 2

0

si utiliza el framework de getbootstrap puede sacar la barra sin la necesidad de JavaScript

solo deber tener en cuenta los siguiente valores

aria-valuenow="75" 
aria-valuemin="0" 
aria-valuemax="100"

https://getbootstrap.com/docs/5.1/components/progress/

.esp{
margin:13px
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">

<div class="progress esp">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
  <br>
</div>
<div class="progress esp">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress esp">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress esp">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress esp">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>

2
  • ya pero es que no son valores estáticos son dinamicos vienen de una tabla. no quiero que se vean el progreso con una barra bonita quiero que al igual que en la imagen ese porcentaje se mueva la barra. Commented el 30 nov. 2021 a las 19:13
  • Con JS ya eso lo cambias, actualizas el valor aria-valuenow y la barra se agranda :) @josegarcia Commented el 30 nov. 2021 a las 20:37
0

realmente lo que hace que se mueva la barra es es si muevo yo los estilos css

el que esta haciendo que se mueva mi primera barra este codigo

    document.getElementsByClassName("progreso")[0].style.width = "<?php echo $porcentaje; ?>%";
    document.getElementsByClassName("porcentaje")[0].innerHTML = "<?php echo $percent; ?>%";

mi css

.barra{
            background-color: #b6006b;
            border-radius: 5px;
            height: 25px;
            width: 300px;
            border: solid 1px #ccc;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
        }
 .progreso{
            border-radius: 5px;
            height: 25px;
            width: 10%;
            border-right: solid 1px #ccc;
            background-color: lightblue;
            background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        }
.porcentaje{
            padding-right: 7px;
            padding-top: 2px;
            text-align: right;
        }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.