recipe for a progress bar in html/php/css

Today I was struggling with progress bar on customer page,
the task was: creation percentage bar of people who are involved in some event, what I have got was: number of people and total number of target that company wanted to reach,

1
2
3
4
5
6
7
8
9
10
< ?php 
if($total == 0)
$perc = 0;
else
 $perc = $people/$total
 
if($perc >= 1)
$perc = 1;
 
?>

then I had to create containing div

1
2
3
<div style="width:500px; border: 1px solid #999; background: #eee; display: block; height: 10px;">
<!-- here code from below -->
</div>

now, I had to create second div inside containing div with $perc width of containing div

1
2
<div style="width: <?php ech round(500*$perc); ?>; background:url() #coolcolor; height: 10px; display: block; " >
</div>

simple but it works!

Leave a Reply

Your email address will not be published. Required fields are marked *