CSS进度条

Question

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.

Answer 1

One simple way of doing it is placing a div inside a larger div and setting the percentage width of the inner div. Here's a fiddle showing what I mean.

You can get the percentage of max_shields by writing (Assuming they are both numbers)

$percentage = $db_field['shields'] * ($db_field['max_shields'] / 100);

Apply the percentage as the width of the inner div.

<div id="progress-inner" style="width: <?php echo $percentage; ?>%;"></div>

It would be a breeze to animate that progress bar using jQuery animate if you wanted to.

Answer 2

<style type="text/css">
.table, th
{
background-color:Blue;
border-collapse:collapse;
}
<table class="table" >
        <tr id = "row1" >
            <td id ="cell1" class="td"></td>
        </tr>
    </table>    
  <script language="javascript" type="text/javascript" >

    var i = 1;
    var timerID = 0;
    timerID = setTimeout("progress()",200); 
    var scell = '';
    var sbase = '';
    sbase = document.getElementById("cell1").innerHTML;

function progress()
{

    var tend = "</tr></table>";
    var tstrt = "<table><tr>";
    scell = scell + "<td style='width:15;height:25' bgcolor=blue>";

    document.getElementById("cell1").innerHTML = sbase + tstrt +  scell + tend; 


     if( i < 50) 
    {                    
        i = i + 1;

        timerID = setTimeout("progress()",200); 
    }
    else
     {
        if(timerID)
        {
   document.getElementById("cell1")
      .innerHTML=document.getElementById("cell1").innerHTML 
      + "</tr></table>";
            clearTimeout(timerID);

        }
     }

  }
     </script>

Answer 3

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.