How to make a progress bar

Question

How would one go about making a progress bar in html/css/javascript. I don't really want to use Flash. Something along the lines of what can be found here: http://dustincurtis.com/about.html

All I really want is a 'progress bar' that changes to the values I give in PHP. What would be your though process? Are there any good tutorials on this?

Answer 1

You can do it by controlling the width of a div via css. Something roughly along these lines:

<div id="container" style="width:100%; height:50px; border:1px solid black;">
  <div id="progress-bar" style="width:50%;/*change this width */
       background-image:url(someImage.png);
       height:45px;">
  </div>
</div>

That width value can be sent in from php if you so desire.