The other day i was looking to create a simple progress bar for a test application. So this is what i came up with in. Keep in mind this is nothing super intelligent or sophisticated.
Lets start by starting creating the function which will be used to create this progress bar.
<?php
function progressBar($percentage) {
$data = "<div id=\"progress-bar\" class=\"all-rounded\">\n";
$data .= "<div id=\"progress-bar-percentage\" class=\"all-rounded\" style=\"width: $percentage%\">";
if ($percentage > 5) { $data .= "$percentage%";} else {$data .= "<div class=\"spacer\"> </div>";}
$data .= "</div></div>";
return $data;
}
?>
<html>
<head>
<style type="text/css">
.all-rounded {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.spacer {
display: block;
}
#progress-bar {
width: 300px;
margin: 0 auto;
background: #cccccc;
border: 3px solid #f2f2f2;
}
#progress-bar-percentage {
background: #3063A5;
padding: 5px 0px;
color: #FFF;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<?=progressBar(60);?>
</body>
</html>
Once the CSS has been set, to run this function we just need to throw the function where you want to display it! Change the number inside the function to display a different percentage value.
progressBar(60);
Keep in mind you can use some MySQL queries to dynamically change the progress bar. This can be combined with other calculating formula's also if you would really want this to be effective.