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.
1 2 3 4 5 6 7 8
<?php function progressBar($percentage) { print "<div id=\"progress-bar\" class=\"all-rounded\">\n"; print "<div id=\"progress-bar-percentage\" class=\"all-rounded\" style=\"width: $percentage%\">"; if ($percentage > 5) {print "$percentage%";} else {print "<div class=\"spacer\"> </div>";} print "</div></div>"; } ?>
-
Next lets give the Div’s some style.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
.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; }
-
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.
1
<? 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.
Navigate to the downloads area to get a working example. All that is required is PHP and some html/css knowledge for the look of the bar.
