I am trying to create a progress bar that reads from a sql server. The field in the SQL server will be numbered from 25 - 100. The current code i have is as followed:
.outer{
height:18px;
width:50px;
border:solid 1px #000;
}
.inner{
height:18px;
width:<?php echo $percent ?>%;
border-right:solid 1px #000;
background: #f8ffe8; /* Old browsers */
background: -moz-linear-gradient(top, #f8ffe8 0%, #e3f5ab 33%, #b7df2d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(33%,#e3f5ab), color-stop(100%,#b7df2d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* IE10+ */
background: linear-gradient(to bottom, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 ); /* IE6-9 */
}
<?php
include ('connect.php');
//select database to work with
$selected = mysql_select_db("yerongashs",$connect)
or die("could not select table");
//execute the SQL query and return records
$result = mysql_query("SELECT * From repairs");
$percentage = mysql_query("SELECT Status FROM REPAIRS");
echo "<table class='table table-striped'>";
echo "<thead>";
echo "<tr><th>First Name</th><th>Last Name</th><th>Status</th></tr>";
echo "</thead>";
echo "<tbody>";
while($row = mysql_fetch_array($result)) {
echo "<tr><td>";
echo $row['FirstName'];
echo "</td><td>";
echo $row['LastName'];
echo '</td><td class="outer">';
echo '<div class="inner">';
echo $row['Status'];
echo '</div>';
echo "</td></tr>";
}
echo "</tbody>";
echo "</table>";
//close connection
mysql_close($connect);
?>
I have been working on this for the past 2 days at work and just can't seem to get it working correctly. I am fairly new at PHP and SQL. Any help on this would be much appreciated.
</div>