This post originated from an RSS feed registered with Ruby Buzz by Amos King. Original Post: Progress Bars using css Feed Title: DirtyInfomation.com Feed URL: http://dirtyinformation.com/xml/rss Feed Description: Things that I run into while programing, and my daily two hour one way comute to work. So, yes, a little bit of politics makes it in there. Latest Ruby Buzz Posts Latest Ruby Buzz Posts by Amos King Latest Posts From DirtyInfomation.com

I spend a little time trying to get css to make a progress bar for me. It took some thought and time, but everything worked out well. I thought I would put it here for everyone to see.

The CSS

.prog-empty {
  width: 400px;
  height: 15px;
  background: #247;
  padding: 0;
  margin: 20px;
  border: 5px;
}

.prog-bar {
  height: 15px;
  background: #f70;
  padding: 0;
  margin: 0;
}

The html

<div class=".prog-empty">
  <div class="prog-bar" style="width: 63%">
  </div>
</div>

Now the width percentage needs to be replaced with a function. With the exact code from above I get something like:

I hope everyone can find this useful. Remember that you can use url("image.file") in place of the colors.