Monday, November 5, 2012

Super simple horizontal gauge or progress bar in PHP + HTML

Yesterday I was coding a small piece of PHP code when suddenly I needed to display, in a fashionable way, an affinity value between two elements.

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; ">&nbsp;';

echo '</div></div><br>';
}

The two background images I'm using are here for download :



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