Tumblr is where tens of millions of creative people around the world share and follow the things they love.Sign up to find more cool stuff to follow
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;”;
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;”>
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
Thats it! You have a simple progress bar!
FINAL RSVP LIST...DONE
You guys rock! I cannot tell you how much I appreciate how nice, precise, and diligent you all have been! Thank you for following my requests, and being really great! You definitely make the hard work I’ve put into this pay off!
I cannot wait to see you all tomorrow. This has been an amazing experience so far, and I’m hoping you all will have a great time tomorrow!
Thank you all so much <3
Progress Bar using CSS (Animated)
These codes were the ones I used during the maintenance of this blog. The codes are from HTMLuv. The credits goes to them for arranging the codes and css-tricks for the original.
Step one. Copy and paste this code under <style type=”text/css”>
To change the background of the meter, find .meter > span then under it you will find background-color:, change #5a80a3 to your liking.
Step two. Paste this code where you want it to appear.
To change the width of the meter, change the 33% in the <span width=”33%”> code.
Step three. Paste this script between <head> and </head> tags.
Then that’s it. I added a code under where it says 33%. Because it is really hard to know how many percent is done, so yeah, it’s optional. Just delete it if you don’t want it.