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.