Wednesday 11 December 2013

Dynamic progress bar for Twitter Bootstrap using PHP

Twitter Bootstrap offers some very useful progress bars. See http://getbootstrap.com/components/#progress
They are based on percentages, so you need to get the length of the shaded bar as a percentage of the whole bar for them to be accurate.

Below is a small example of how to do this with PHP.

<?php
$currentVal = 10;
$maxVal = 20;
$percentageVal = ($currentVal/$maxVal)*100;
?>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="<?php echo $currentVal ?>" aria-valuemin="0" aria-valuemax="<?php echo $maxVal ?>"  style="width:<?php echo $percentageVal ?>%;">
    <span class="sr-only"><?php echo $percentageVal ?> Complete</span>
  </div>
</div>

No comments:

Post a Comment