A Simple Progress Bar

Today I made a simple progress bar out of nested DIV elements, very simple php code, and some CSS.

Feel free to use this code in your own page.

1) Get the current number of whatever it is you’re counting.  If you’re using PHP and MySQL, it might look something like this:

     $query = “SELECT COUNT(*) FROM table_you_wanna_count;”;
     $current_number= mysql_query($query);

2) Create the nested DIV elements that will represent the progress bar.  I have a container DIV with a 1px border, and 2 DIVs nested within it.  The first one will be the progress bar, and the 2nd will be a container for text that you might want to display over the progress bar.  In my case, I am floating 2 spans, one left and one right.  The left one will state the current count, and the right one will state the goal amount. ;

<div style=”margin-left:15px;width:250px;height:22px;display:inline-block;border:1px solid #c8c8c8;”>
<div style=”width:246px;height:18px;display:inline-block;background-color:#8ed48e;margin:2px;”>
<div style=”width:246px;height:18px;display:inline-block;background-color:none;margin:0px;”>
    <span style=”display:inline-block;float:left”></span>
    <span style=”display:inline-block;float:right”></span>
</div>
</div>
</div>

In this example, I made the progress bar 250 pixels wide and 22 pixels tall.  You can use whatever dimensions you want, but it’s a good idea to keep the inner 2 DIV dimensions at or around 2px less than the parent one, and the margins the same difference.  This will keep the outer DIVs border looking balanced.

3) Use the PHP $variable to adjust the width of the progress bar (2nd level DIV), and if you want, insert the actual count. 

<?php $progressbar = ($current_number / 10000) * 246; ?>
//10,000 is my goal amout, so I divided my current amount by my total, and multiplied it by the width of my ‘progress bar’ DIVs maximum width.

<div style=”margin-left:15px;width:250px;height:22px;display:inline-block;border:1px solid #c8c8c8;”><div style=”width:<?php echo round($progressbar); ?>px;height:18px;display:inline-block;background-color:#8ed48e;margin:2px;”>
// ^^ insterted the $progressbar width from above, rounded to nearest 1 pixel

<div style=”width:246px;height:18px;display:inline-block;background-color:none;margin:0px;”><span style=”display:inline-block;float:left”><?php echo “<b>” . $current_number . “</b>”; ?></span> <span style=”display:inline-block;float:right”><b>10,000</b></span>
//floated SPAN elements, one with current amount, and one with goal amount

</div></div></div>

Thats it!  You have a simple progress bar!