After digging a while for jQuery plugins or PHP code I decided to go for my own solution, cause the ready to use solutions where full of useless fancy fetures and animations.
Aas usual I prefer a simple solution, with a very few lines of code.
Here is the result :
And here you can find the very simple PHP code :
function printGauge( $perc)
{
echo '<div class="roundednoshadow" style="width:100%; height:20px; border-color:#999999; background-position:left top; background-image:url(\'images/gaugered.png\'); background-repeat:repeat-x; overflow:hidden;">';
echo '<div style="width:'.$perc.'%; height:20px; margin-left:0px; float:left; border-color:#000000; background-image:url(\'images/gaugegreen.png\'); background-repeat:repeat-x; "> ';
echo '</div></div><br>';
}
And a little extract from the CSS :
.roundednoshadow {
-webkit-border-radius: 5px;
border-radius: 5px;
border:1px solid #dddddd;
background-color:#eeeeee;
}
No comments:
Post a Comment