CODEWITHSUNDEEP
phphtmlcss
jose garcia
jose garcia

Reputation: 11

progress bar in php table

good to all I have a problem or rather a question I have been researching on the Internet how to place a progress bar. and they all use the style method giving the percentage from it. I would like to add a progress bar to my code made in php if someone can support me. I would appreciate.

As you can see in the image in my% total time it already shows the%. now I would like to show that percentage with a progress bar.

I tried to show it but it only takes me one record.

<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);?>


 <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 />";

?>

Here are screenshots of before and after fix
Before without fix: before

After using @Emrah Tuncel's solution: after

Upvotes: 1

Views: 890

Answers (1)

Emrah Tuncel
Emrah Tuncel

Reputation: 749

This is how it would be without javascript.

<?php foreach($users as $user){ ?>

    ...

    <td class="bg-info text-white" style="color:#070001; width:200px;"> 
        <?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); 
        ?>
        <div class="barra" style="background: #EEE; width: 100%; height: 10px; position: relative;">
            <div class="progreso" style="height: 100%; width: <?=$percent?>%; background: green;"><div class="porcentaje"></div></div>
        </div>
    </td>
<?php } ?>

Places you need to customize;

  1. The width value in the td style. (width: 200px)
  2. The background value in the barra div style. (background: #EEE; height:10px)
  3. The background value in the progreso div style. (background: green)

Upvotes: 1

Related Questions