简体   繁体   中英

How can I modify the maximum value of my progress bar

So, I'm making a progress bar that is getting its values from some variables I have declared, all is working well except there is one issue. When my aria-value now meets my aria-value max there is still space left over in the progress bar since it fills the width of it to only 80% and not 100%. So I'm kind of stuck on a fix for this. Here's my Code

 <?php 
      $current_players=$infosprp['players'];
      $max_players=$infosprp['places'];
      $width = $current_players;

      echo '<div class="progress w-25 m-auto" style="height: 30px;">
      <div class="font-weight-bold progress-bar bg-warning progress-bar-striped progress-bar-animated text-center" 
           role="progressbar" 
           aria-valuenow="'.$current_players.'"
           aria-valuemin="0" 
           aria-valuemax="'.$max_players.'"style="width:'.$width.'%;font-size:18px;">
           '.$width.'/'.$max_players.'
      </div>
    </div>'; 
?>

Here is a picture of the result when the progress bar is filled

I'm bad at explaining things, so I hope you were able to understand. Thanks.

The width should be the percentage of $current_players divided by the $max_players . It is only filling up to 80% because the $width is only 80 (players) as shown in the image you linked. The computation for $width should be the following:

$width = $current_players / $max_players * 100;

The width of process bar is 100%. In your image displaying 80% completed, so you use new varibale like $statusBar = ($current_players * 100) / $max_players;

Please see below example, I think it's should work for you.

 <?php 
          $current_players=$infosprp['players'];
          $max_players=$infosprp['places'];
          $width = $current_players;
          $statusBar = ($current_players * 100) / $max_players;

          echo '<div class="progress w-25 m-auto" style="height: 30px;">
          <div class="font-weight-bold progress-bar bg-warning progress-bar-striped progress-bar-animated text-center" 
               role="progressbar" 
               aria-valuenow="'.$current_players.'"
               aria-valuemin="0" 
               aria-valuemax="'.$max_players.'"style="width:'.$statusBar.'%;font-size:18px;">
               '.$width.'/'.$max_players.'
          </div>
        </div>'; 
    ?>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM