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