css barre de progression

Question

J'ai une question concernant une barre de progression. J'ai lu à peu près tous les articles ici, mais il semble que je ne peux pas faire fonctionner l'un d'entre eux dans mon scénario. J'ai ce qui suit qui montre des nombres tels que 50/500 où 50 est le nombre réel et 500 est le maximum.

$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'] . ""; 

La plupart des barres de progression que je vois, décrire les délais que je dois montrer visuellement la fraction

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

Comment puis-je placer ce que je puisse avoir une barre de progression illustrant les progrès? Je suis désolé je ne suis pas bon à css. Toute aide serait grandement appréciée.

Answer 1

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

Et définissez les styles selon vos besoins. Peut-être une bordure pour le conteneur et une couleur de fond pour la barre principale. C'est tout ce qu'il y a à une barre de progression de base.

Answer 2

Un moyen simple de le faire est de placer un div à l'intérieur d'un div plus grand et de définir la largeur en pourcentage de la div interne. Here's a fiddle montrant ce que je veux dire.

Vous pouvez obtenir le pourcentage de max_shields en écrivant (en supposant qu'ils sont tous les deux chiffres)

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

Appliquer le pourcentage que la largeur de la div intérieure.

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

Ce serait un jeu d'enfant pour animer cette barre de progression en utilisant jQuery animate si vous vouliez.

Answer 3

<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>