Search code examples
mysqlcssprogress-barprogress

css progress bar


I have a question in regards to a progress bar. I've read pretty much all the posts here but it appears I can't make any of them work in my scenario. I have the following which shows numbers such as 50/500 where 50 is the actual number and 500 is the max.

$SQL = "SELECT * FROM db_ships WHERE ship_id = $user[ship_id] LIMIT 1";
$result = mysql_query($SQL);

while ($db_field = mysql_fetch_assoc($result)) {
print $db_field['shields'] . " / ";
print $db_field['max_shields'] . "";

Most progress bars that I see depict timeframes, I need to visually show the fraction

print $db_field['shields'] . " / ";
    print $db_field['max_shields'] . "";

How can I place this so I can have a progress bar depicting the progress? I am sorry I am not good at css. Any help would be greatly appreciated.


Solution

  • echo "<div class=\"progressbar_container\"><div class=\"progressbar\" style=\"width: ".($db_field['shields']/$db_field['max_shields']*100)."%\"></div></div>";
    

    And define styles as needed. Maybe a border for the container and a background colour for the main bar. That's all there is to a basic progress bar.